Active link with React-Router? no longer has the activeClassName or activeStyle properties. In react-router v4 you have to use
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | const Router = () => ( <BrowserRouter> <div> <Nav> <NavLink exact={true} activeClassName='is-active' to='/'>Home</NavLink> <NavLink activeClassName='is-active' to='/about'>About</NavLink> </Nav> <Match pattern='/' exactly component={Home} /> <Match pattern='/about' exactly component={About} /> <Miss component={NoMatch} /> </div> </BrowserRouter> ) |
I added an exact property to the home
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
