How can I redirect in React Router v6?

by

I think you should use the no match route approach.

Check this in the documentation: Adding a “No Match” Route

import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';

<BrowserRouter>
  <Routes>
    <Route path="/" element={<Home />} />
    <Route path="/lab" element={<Lab />} />
    <Route
        path="*"
        element={<Navigate to="/" replace />}
    />
  </Routes>
</BrowserRouter>

To keep the history clean, you should set replace prop. This will avoid extra redirects after the user click back.

More Related Contents:

  1. react router v6 navigate outside of components
  2. Problem in redirecting programmatically to a route in react router v6
  3. React doesn’t reload component data on route param change or query change
  4. Uncaught TypeError: Cannot read property ‘push’ of undefined (React-Router-Dom)
  5. Multiple Nested Routes in react-router-dom v4
  6. ReactJS: [Home] is not a component. All component children of must be a or
  7. How to create a protected route with react-router-dom?
  8. React: ‘Redirect’ is not exported from ‘react-router-dom’
  9. React-router URLs don’t work when refreshing or writing manually
  10. Pass props in Link react-router
  11. How do I render components with different layouts/elements using react-router-dom v6
  12. react-router scroll to top on every transition
  13. React Router with optional path parameter
  14. Use anchors with react-router
  15. react-router getting this.props.location in child components
  16. How do you pass data when using the navigate function in react router v6
  17. How do I reload a page with react-router?
  18. onEnter not called in React-Router
  19. Error “Error: A is only ever to be used as the child of element”
  20. react-router go back a page how do you configure history?
  21. How to manually invoke Link in React-router?
  22. using history with react-router-dom v6
  23. Detect change in query param react-router-dom v4.x and re-render component
  24. React Router Dom routes are returning blank pages
  25. Material-ui adding Link component from react-router
  26. How to use normal anchor links with react-router
  27. React router global header
  28. React router dom: Route and Router not working at all
  29. On React Router, how to stay logged in state even page refresh?
  30. How to properly use useHistory () from react-router-dom?

Leave a Comment