react-router-dom, component not rendering but only <App> shows instead

user_13496784 0
Viewed 62

App.js:-

function App() {
  return (
    <BrowserRouter>
 
 <h1>App screen</h1>

    <Routes>
    <Route path="/projectDashboard"  component={ProjectScreen} ></Route>
    <Route  path="/" component={HomeScreen} ></Route>
    </Routes>


  </BrowserRouter>
  );

Output that i get:-

I can only see the h1 tag. The routes don't work. Whenever I enter "localhost:3000/projectDashboard" it autocorrect and sends me to "/"

I've looked around other answers and have tried setting the exact variable as well but the issue still exists.

react-router-dom react-router reactjs
1 Answers

In RRDv6 Route components render their components on the element prop as JSX, the component and render props no longer exist.

<Routes>
  <Route path="/projectDashboard" element={<ProjectScreen />} />
  <Route path="/" element={<HomeScreen />} />
</Routes>

For reference Routes & Route

interface RouteProps {
  caseSensitive?: boolean;
  children?: React.ReactNode;
  element?: React.ReactElement | null;
  index?: boolean;
  path?: string;
}
user_86908570
Related