React Router Dom v6 shows active for index as well as other subroutes

by

You can specify the end prop on the “root”-level link to the "/dashboard" path.

NavLink

If the end prop is used, it will ensure this component isn’t matched
as “active” when its descendant paths are matched.

<NavLink to='' end>
  {({ isActive }) =>
     isActive ? (
           <text style={{color: blue}}>Home</text>
     ) : (                      
           <text>Home</text>
     )
  }
</NavLink>

Edit react-router-dom-v6-shows-active-for-index-as-well-as-other-subroutes

More Related Contents:

  1. React : difference between and
  2. How to create a protected route?
  3. React-router-v6 access a url parameter
  4. React Router v4 renders multiple routes
  5. How to pass params into link using React router v6?
  6. react-router-dom v6 useNavigate passing value to another component
  7. Detect Route Change with react-router
  8. Simple Conditional Routing in Reactjs
  9. Cannot read property ‘history’ of undefined (useHistory hook of React Router 5)
  10. Invariant failed: You should not use outside a
  11. useNavigate() may be used only in the context of a component
  12. React – TypeError: Cannot read properties of undefined (reading ‘params’)
  13. Error: useHref() may be used only in the context of a component. It works when I directly put the url as localhost:3000/experiences
  14. react app showing empty page when redirecting on production build
  15. React App goes blank after importing React-Router-Dom
  16. React Router 4 Nested Routes not rendering
  17. Children won’t render when using a layout in ReactJS
  18. How to go back to previous route in react-router-dom v6
  19. React Router V6 – Error: useRoutes() may be used only in the context of a component
  20. Programmatically navigate using React router
  21. Component does not remount when route parameters change
  22. React.createElement: type is invalid — expected a string
  23. Programmatically navigating in React-Router v4
  24. Nesting Routes in react-router v4
  25. What is withRouter for in react-router-dom?
  26. Target Active Link when the route is active in Next.js
  27. Performing Authentication on Routes with react-router-v4
  28. How to create a protected route with react-router-dom?
  29. How to nest routes in React Router v4?
  30. How can I redirect in React Router v6?

Leave a Comment