react router v4 default page(not found page)

by

React Router’s No Match documentation covers this. You need to import the <Switch> component, then you can remove the path attribute altogether.

A <Switch> renders the first child <Route> that matches. A <Route> with no path always matches

This is the example that uses:

<Router>
  <div>
    <Switch>
      <Route path="https://stackoverflow.com/" exact component={Home}/>
      <Redirect from="/old-match" to="/will-match"/>
      <Route path="/will-match" component={WillMatch}/>
      <Route component={NoMatch}/>
    </Switch>
  </div>
</Router>

So in your case, you’d simply drop the path="*" and introduce the <Switch>:

<Switch>
  <Route exact path="https://stackoverflow.com/" component={Home}/>
  <Route path="/user" component={User}/>
  <Route component={Notfound} />
</Switch>

Remember to include Switch to your import statement at the top.

More Related Contents:

  1. Programmatically navigate using React router
  2. How to get parameter value from query string?
  3. React-router-v6 access a url parameter
  4. Component does not remount when route parameters change
  5. React.createElement: type is invalid — expected a string
  6. Programmatically navigating in React-Router v4
  7. react-router-dom v6 useNavigate passing value to another component
  8. Nesting Routes in react-router v4
  9. What is the best way to redirect a page using React Router? [closed]
  10. React Router Pass Param to Component
  11. How to stop /#/ in browser with react-router?
  12. What is withRouter for in react-router-dom?
  13. How do you programmatically update query params in react-router?
  14. How to tell webpack dev server to serve index.html for any route
  15. react-router vs react-router-dom, when to use one or the other?
  16. Using React-Router with a layout page or multiple components per page
  17. Target Active Link when the route is active in Next.js
  18. Use history.push in action creator with react-router-v4?
  19. How do I avoid ‘Function components cannot be given refs’ when using react-router-dom?
  20. Performing Authentication on Routes with react-router-v4
  21. Error: useHref() may be used only in the context of a component. It works when I directly put the url as localhost:3000/experiences
  22. react app showing empty page when redirecting on production build
  23. React App goes blank after importing React-Router-Dom
  24. Pass object through Link in react router
  25. Automatic redirect after login with react-router
  26. How to nest routes in React Router v4?
  27. React Router v4 with multiple layouts
  28. Passing values through React-Router v4
  29. React Router work on reload, but not when clicking on a link
  30. React Router V6 – Error: useRoutes() may be used only in the context of a component

Leave a Comment