CODEWITHSUNDEEP
javascriptreactjsreact-router-dom
Ons Jannet
Ons Jannet

Reputation: 367

React Router Dom routes are returning blank pages

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

Result

Upvotes: 3

Views: 966

Answers (2)

Youssouf Oumar
Youssouf Oumar

Reputation: 46291

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

Upvotes: 2

Ricardo Ferreira
Ricardo Ferreira

Reputation: 86

That's not how you use Routes object. You must use Routes > Route as a declaration. In order to go for what your trying which is to render a component based on url, you must use Outlets.

https://reactrouter.com/docs/en/v6/api#outlet

Upvotes: 0

Related Questions