react-router-dom v6 Routes showing blank page

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 (
      <Route path="" element={<Welcome />} />

Ensure that you have rendered a router around your app.

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

      <WebRoutes />

Leave a Comment