CODEWITHSUNDEEP
reactjsreact-router
Théo Mesnil
Théo Mesnil

Reputation: 23

React router - activeClassName on Link home

I have a problem with react router activeClassName on Link.

return (
      <div className="navigation">
        <ul>
          <li>
            <Link to={'/'} activeClassName="active">
              Home
            </Link>
          </li>
          <li>
            <Link to={'about'} activeClassName="active">
              About
            </Link>
          </li>
          <li>
            <Link to={'freebies'} activeClassName="active">
              Freebies
            </Link>
          </li>
          <li>
            <Link to={'sandbox'} activeClassName="active">
              Sandbox
            </Link>
          </li>
        </ul>
      </div>
    );

The problem is when i am for exemple on link about, activeClassName work on this link but also in the home link too ' / '.

I don't know if someone have the same issue.

Thank you !

Upvotes: 2

Views: 2469

Answers (1)

WitVault
WitVault

Reputation: 24130

Since you have used <IndexRoute component={Home} /> to render home component.

You should use IndexLink to provide link for Home page

<li><IndexLink to="/" activeClassName="active">Home</IndexLink></li>

With that this ( Home ) link will be only "active" when we're at the index route.

Upvotes: 9

Related Questions