React router dom won't show component-CodePudding

I'm trying to create page where first user have to login then it will take to the main lay out component that is Home.js component, in Home.js have Route that show default page that is <Dashboard/>. But for some reason it just won't show the Dashboard component.

Make it clear, here's the code:

App.js

import Login from './Component/Login';
import Register from './Component/Register.jsx'
import Home from './Component/Home'
import {
  BrowserRouter as Router,
  Routes,
  Route,
} from "react-router-dom";
    
function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route exact path="/" element={<Login />} />
          <Route path="/register" element={<Register />} />
          <Route path="*" element={<Home />} />
        </Routes>
      </Router>
    </div>
  );
}
    
export default App;

When the user done login, take to Home.js page which is this code:

Home.js

import React from "react";
import Sidebar from './Sidebar'
import Dashboard from "./Dashboard";
import Profile from "./Profile";
import { Routes, Route } from 'react-router-dom'
import './Home.css'

function Home() {
  return (
    <>
      <Sidebar/>    
      <Routes>
        <Route index element={<Dashboard />} /> // This won't show for some reason.
        <Route path="/profile" element={<Profile />} />
      </Routes>
    </>
  );
}

export default Home;

The code in dashboard component is only text, the code:

Dashboard.js

import React from 'react'

function Dashboard() {
  return (
    <div className="dashboard">
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deleniti, odio totam blanditiis nobis explicabo in repellendus laborum, quas velit corrupti dolore error minus natus fugiat alias fuga esse quo recusandae voluptatum ullam quia. Voluptatum obcaecati, mollitia suscipit ex modi quidem, placeat ratione maxime id sint alias dignissimos tempora soluta sed ab voluptates voluptatem facere velit dolor temporibus! Officiis quod illo dignissimos vitae et temporibus, iusto accusantium ipsum ex. Perspiciatis sapiente perferendis cumque corporis suscipit esse. Voluptatem laudantium quam placeat dignissimos.</p>
    </div>
  )
}

export default Dashboard

Does anyone know why Dashboard not showing?

CodePudding user response：

If the routed components are rendering descendent routes then the parent route should append a trailing wildcard "*" character to the path so the descendent routes can also be matched and rendered.

The index route of the Home component is already matched by "/" rendering the Login component. Move either of Login or Dashboard to another path.

Example:

function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route path="/login" element={<Login />} /> // <-- "/login" now
          <Route path="/register" element={<Register />} />
          <Route path="*" element={<Home />} />
        </Routes>
      </Router>
    </div>
  );
}

...

function Home() {
  return (
    <>
      <Sidebar/>    
      <Routes>
        <Route index element={<Dashboard />} /> // <-- renders on "/" now
        <Route path="/profile" element={<Profile />} />
      </Routes>
    </>
  );
}