React Router 4 Nested Routes not rendering

by

This behaviour happens because have an exact attribute mentioned on the parent route

<Route exact path="https://stackoverflow.com/" component={Landing} />

So what happens is that react-router sees a path /test to match and then tries to match it starting from the top level. and it sees two routes one is exactly / and other is /contribute. None of them match the required path and hence you see a blank page

You need to write

<Route path="https://stackoverflow.com/" component={Landing} />

So when you do this, it will see / which matches /test partially and then will try to find a matched route in the landing component which it will find.

Also change the order of the parent Route, since Switch renders the first match and / is a partial match for /test so /contribute wont work

Your final code would look like

const App = () => (
  <BrowserRouter>
    <Provider store={store}>
      <Switch>
        <Route path="/contribute" component={Contribute} />
        <Route path="https://stackoverflow.com/" component={Landing} />
      </Switch>
    </Provider>
  </BrowserRouter>
);

More Related Contents:

  1. Detect Route Change with react-router
  2. Simple Conditional Routing in Reactjs
  3. How to push to History in React Router v4?
  4. React : difference between and
  5. How to create a protected route?
  6. React-router-v6 access a url parameter
  7. React Router v4 renders multiple routes
  8. How to pass params into link using React router v6?
  9. Programmatically navigating in React-Router v4
  10. react-router-dom v6 useNavigate passing value to another component
  11. Nesting Routes in react-router v4
  12. React Router v4 – How to get current route?
  13. React doesn’t reload component data on route param change or query change
  14. Cannot read property ‘history’ of undefined (useHistory hook of React Router 5)
  15. Invariant failed: You should not use outside a
  16. Nested Routes not rendering with React Router v4
  17. useNavigate() may be used only in the context of a component
  18. Use history.push in action creator with react-router-v4?
  19. React Router Dom v6 shows active for index as well as other subroutes
  20. React – TypeError: Cannot read properties of undefined (reading ‘params’)
  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. React router 4 does not update view on link, but does on refresh
  25. How to nest routes in React Router v4?
  26. Children won’t render when using a layout in ReactJS
  27. How to go back to previous route in react-router-dom v6
  28. React Router work on reload, but not when clicking on a link
  29. React Router V6 – Error: useRoutes() may be used only in the context of a component
  30. How can I redirect in React Router v6?

Leave a Comment