Active link with React-Router?

by

This is an old, outdated answer for React Router v4

<Link> no longer has the activeClassName or activeStyle properties. In react-router v4 you have to use <NavLink> if you want to do conditional styling:

const Router = () => (
  <BrowserRouter>
    <div>
      <Nav>
        <NavLink exact activeClassName="is-active" to="https://stackoverflow.com/">Home</NavLink>
        <NavLink activeClassName="is-active" to='/about'>About</NavLink>
      </Nav>

      <Match pattern="https://stackoverflow.com/" exactly component={Home} />
      <Match pattern='/about' exactly component={About} />
      <Miss component={NoMatch} />
    </div>
  </BrowserRouter>
)

I added an exact property to the home <NavLink>, I’m fairly sure that without it, the home link would always be active since / would match /about and any other pages you have.

More Related Contents:

  1. What do multiple arrow functions mean in JavaScript?
  2. Arrow function without curly braces
  3. Why shouldn’t JSX props use arrow functions or bind?
  4. How to render an array of objects in React?
  5. Nested routes with react router v4 / v5
  6. react router v6 navigate outside of components
  7. Problem in redirecting programmatically to a route in react router v6
  8. React Native: require() with Dynamic String?
  9. Concatenating variables and strings in React
  10. React functional stateless component, PureComponent, Component; what are the differences and when should we use what?
  11. What is the difference between using constructor vs state = {} to declare state in react component?
  12. React react-router-dom pass props to component
  13. ES6 array map doesn’t return anything: ReactJS
  14. Arrow functions and the use of parentheses () or {} or ({})
  15. Why React Hook useState uses const and not let
  16. What does calling super() in a React constructor do?
  17. Multiple Nested Routes in react-router-dom v4
  18. How do I reload a page with react-router?
  19. ES6 functions, arrow functions and ‘this’ in an ES6 class [duplicate]
  20. React.createClass vs. ES6 arrow function
  21. How is this type annotation working in React code without TypeScript?
  22. React-router v4 – cannot GET *url*
  23. React.js ES6 avoid binding ‘this’ to every method
  24. ReactJS: [Home] is not a component. All component children of must be a or
  25. map function not working in React
  26. Why I receive blank page? React
  27. Detect change in query param react-router-dom v4.x and re-render component
  28. How to restrict access to routes in react-router?
  29. React – How to open PDF file as a href target blank
  30. React cannot read property map of undefined

Leave a Comment