React-Router: No Not Found Route?

by

DefaultRoute and NotFoundRoute were removed in react-router 1.0.0.

I’d like to emphasize that the default route with the asterisk has to be last in the current hierarchy level to work. Otherwise it will override all other routes that appear after it in the tree because it’s first and matches every path.

For react-router 1, 2 and 3

If you want to display a 404 and keep the path (Same functionality as NotFoundRoute)

<Route path="*" exact={true} component={My404Component} />

If you want to display a 404 page but change the url (Same functionality as DefaultRoute)

<Route path="/404" component={My404Component} />
<Redirect from='*' to='/404' />

Example with multiple levels:

<Route path="https://stackoverflow.com/" component={Layout} />
    <IndexRoute component={MyComponent} />
    <Route path="https://stackoverflow.com/users" component={MyComponent}>
        <Route path="user/:id" component={MyComponent} />
        <Route path="*" component={UsersNotFound} />
    </Route>
    <Route path="/settings" component={MyComponent} />
    <Route path="*" exact={true} component={GenericNotFound} />
</Route>

For react-router 4 and 5

Keep the path

<Switch>
    <Route exact path="https://stackoverflow.com/users" component={MyComponent} />
    <Route component={GenericNotFound} />
</Switch>

Redirect to another route (change url)

<Switch>
    <Route path="https://stackoverflow.com/users" component={MyComponent} />
    <Route path="/404" component={GenericNotFound} />
    <Redirect to="/404" />
</Switch>

The order matters!

More Related Contents:

  1. How to render an array of objects in React?
  2. Passing custom props to router component in react-router v4
  3. Nested routes with react router v4 / v5
  4. react-router – pass props to handler component
  5. How to implement authenticated routes in React Router 4?
  6. react router v6 navigate outside of components
  7. Problem in redirecting programmatically to a route in react router v6
  8. React Router with optional path parameter
  9. Use anchors with react-router
  10. React react-router-dom pass props to component
  11. Uncaught TypeError: Cannot read property ‘push’ of undefined (React-Router-Dom)
  12. Active link with React-Router?
  13. Using anchor tags in react-router 4
  14. Multiple Nested Routes in react-router-dom v4
  15. How to hide navbar in login page in react router
  16. How do I reload a page with react-router?
  17. How is this type annotation working in React code without TypeScript?
  18. React-router: How to manually invoke Link?
  19. React-router – How to pass data between pages in React?
  20. React-router v4 – cannot GET *url*
  21. ReactJS: [Home] is not a component. All component children of must be a or
  22. Matched leaf route at location “/” does not have an element
  23. How to create a protected route with react-router-dom?
  24. Why I receive blank page? React
  25. Detect change in query param react-router-dom v4.x and re-render component
  26. How to restrict access to routes in react-router?
  27. React – How to open PDF file as a href target blank
  28. React Router BrowserRouter leads to “404 Not Found – nginx ” error when going to subpage directly without through a home-page click
  29. How can I redirect in React Router v6?
  30. ReactJS Bootstrap Navbar and Routing not working together

Leave a Comment