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

Question

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.

Answer 1

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; }