React Router Dom routes are returning blank pages

Question

My route setup returns a blank page with no error, the only thing that's showing up is the side menu. I don't know what I'm doing wrong.

App.js:

import React from "react";
import Sidebar from "./components/Sidebar";
import i18n from './i18n';
import Dash from "./pages/Dash";
import Prof from "./pages/Prof";
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';

 function App() {
  return (
   <Router>
    <Sidebar/>
    <Routes>
     <Route path='/' exact component={Dash} />
     <Route path='/profile' exact component={Prof} />
    </Routes>
  </Router>
 );
}
export default App;

Dash.js:

import React from "react";
import Dashboard from ".././components/Dashboard";
export default function Dash() {
 return (
<>
  <Dashboard />
</>
);
}

Prof.js:

import React from "react";
import Dashboard from ".././components/Profile";
export default function Prof() {
 return (
<>
  <Profile />
</>
);
}

Answer 1

I assume you are using React Router Dom v6 since you are using Routes instead of Switch, in which case it should be element, not component, the propriety where you pass that component for that route. Also, call the component when passing it like so:

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Sidebar from "./components/Sidebar";
import Dash from "./pages/Dash";
import Prof from "./pages/Prof";

function App() {
  return (
    <Router>
      <Sidebar />
      <Routes>
        <Route path="/" exact element={<Dash />} />
        <Route path="/profile" exact element={<Prof />} />
      </Routes>
    </Router>
  );
}
export default App;

⚠️: notice it's element={<Dash />} and not element={Dash}.