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')
);

Leave a Comment

tech