react-router-dom v6 Routes showing blank page

by

In react-router-dom@6 the Route components don’t render routed content as children, they use the element prop. Other Route components are the only valid children of a Route in the case of building nested routes.

export default function WebRoutes() {
  return (
    <Routes>
      <Route path="https://stackoverflow.com/" element={<Welcome />} />
    </Routes>
  );
}

Ensure that you have rendered a router around your app.

import { BrowserRouter as Router } from 'react-router-dom';

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <WebRoutes />
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);

More Related Contents:

  1. Link tag inside BrowserRouter changes only the URL, but doesn’t render the component
  2. How to pass data from a page to another page using react router
  3. How do I render components with different layouts/elements using react-router-dom v6
  4. react router v6 navigate outside of components
  5. Problem in redirecting programmatically to a route in react router v6
  6. Error: [PrivateRoute] is not a component. All component children of must be a or
  7. React doesn’t reload component data on route param change or query change
  8. Uncaught TypeError: Cannot read property ‘push’ of undefined (React-Router-Dom)
  9. ReactJS – Pass props with Redirect component
  10. Multiple Nested Routes in react-router-dom v4
  11. How do you pass data when using the navigate function in react router v6
  12. how to listen for route change in react-router-dom v6
  13. ReactJS: [Home] is not a component. All component children of must be a or
  14. Error “Error: A is only ever to be used as the child of element”
  15. How to create a protected route with react-router-dom?
  16. using history with react-router-dom v6
  17. React Router Dom routes are returning blank pages
  18. React router dom: Route and Router not working at all
  19. React: ‘Redirect’ is not exported from ‘react-router-dom’
  20. How to properly use useHistory () from react-router-dom?
  21. How can I redirect in React Router v6?
  22. Rerender view on browser resize with React
  23. How to handle the `onKeyPress` event in ReactJS?
  24. Why is useState not triggering re-render?
  25. React form onChange->setState one step behind
  26. init state without constructor in react
  27. What do curly braces mean in JSX (React)?
  28. How to solve problem with too many re-renders in context?
  29. react-router (v4) how to go back?
  30. How can I dispatch function in redux?

Leave a Comment