CODEWITHSUNDEEP
javascriptreactjsreact-router
Francisco Pena
Francisco Pena

Reputation: 73

How to add an active class to my navigation links React router?

I am very new to ReactJS and I am really stuck on this one so please be patient. I was wondering if there was a way to add an active class to my navigation links using react router. This is what my code looks like....

  import React, { Component, PropTypes } from 'react';
  import history from '../../core/history';

  function isLeftClickEvent(event) {
    return event.button === 0;
  }

  function isModifiedEvent(event) {
    return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
  }

  class Link extends Component { // eslint-disable-line react/prefer-stateless-    function

   static propTypes = {
    to: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
    onClick: PropTypes.func
  };

  handleClick = (event) => {
    let allowTransition = true;

    if (this.props.onClick) {
      this.props.onClick(event);
    }

    if (isModifiedEvent(event) || !isLeftClickEvent(event)) {
      return;
    }

    if (event.defaultPrevented === true) {
      allowTransition = false;
    }

    event.preventDefault();

    if (allowTransition) {
      if (this.props.to) {
        history.push(this.props.to);
      } else {
        history.push({
          pathname: event.currentTarget.pathname,
          search: event.currentTarget.search
        });
      }
    }
  };

  render() {
    const { to, ...props } = this.props; // eslint-disable-line no-use-before-define
    return <a href={history.createHref(to)} {...props} onClick={this.handleClick} />;
  }

}

export default Link;


import React, { PropTypes } from 'react';
import cx from 'classnames';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './Navigation.css';
import Link from '../Link';


function Navigation({ className }) {
  return (
    <div className={cx(s.root, className)} role="navigation">
      <Link className={s.link + ' fa fa-dribbble'} to="/dribbble"/>
      <Link className={s.link + ' fa fa-behance' } to="/behance"/>
      <Link className={s.link + ' fa fa-linkedin' } to="/linkedin"/>
      <Link className={s.link + ' fa fa-twitter' } to="/twitter"/>
      <Link className={s.link + ' fa fa-instagram' } to="/instagram"/>
      <Link className={s.link + ' fa fa-vimeo' } to="/vimeo"/>
    </div>
  );
}

Navigation.propTypes = {
  className: PropTypes.string
};

export default withStyles(s)(Navigation);

What I want to do is add an active class like this for example:

<a class="link active">Home</a>
<a class="link">About</a>
<a class="link">Contact</a>
<a class="link">Work</a>
<a class="link">Support</a>

Any ideas on how to do this? I have been messing around with react but I cant find an easy way to do it..

Upvotes: 1

Views: 2506

Answers (3)

Shemeer M Ali
Shemeer M Ali

Reputation: 1041

I just used activeClassName="active"

<Link to="/" activeClassName="active">
                            <i className="fa fa-tachometer" aria-hidden="true"></i><br/>Dashboard</Link>

Upvotes: 1

Francisco Pena
Francisco Pena

Reputation: 73

Actually I found the answer here it's

function Navigation({ className }) {
  return (
    <div className={cx(s.root, className)} role="navigation">
      <Link className={cx(s.link, 'fa fa-dribbble', { 'active': location.pathname === '/dribbble' })} to="/dribbble" />
      <Link className={cx(s.link, 'fa fa-behance', { 'active': location.pathname === '/behance' })} to="/behance" />
      <Link className={cx(s.link, ' fa fa-linkedin', { 'active': location.pathname === '/linkedin' })} to="/linkedin" />
      <Link className={cx(s.link, ' fa fa-twitter', { 'active': location.pathname === '/twitter' })} to="/twitter" />
      <Link className={cx(s.link, ' fa fa-instagram', { 'active': location.pathname === '/instagram' })} to="/instagram" />
      <Link className={cx(s.link, ' fa fa-vimeo', { 'active': location.pathname === '/vimeo' })} to="/vimeo" />
    </div>
  );
}

NOTE: This is without React Router

Upvotes: 1

torresomar
torresomar

Reputation: 2229

You can change the style of the active link:

import React from 'react';
import { Router, Route, IndexRoute, Link, IndexLink, browserHistory } from 'react-router';

const ACTIVE = { background: '#286090', color: '#fff'}
// In your render
<li><Link to="/case" activeStyle={ACTIVE}>case</Link></li>
<li><Link to="/primarysource" activeStyle={ACTIVE}>primarysource</Link></li>                
<li><Link to="/literature" activeStyle={ACTIVE}>literature</Link></li>           
<li><Link to="/study" activeStyle={ACTIVE}>study</Link></li>

An example can be found in the react-router examples github https://github.com/reactjs/react-router/blob/master/examples/active-links/app.js

Upvotes: 3

Related Questions