React Router Dom无法渲染Dashboard组件问题求助

我正在开发一个需先登录再进入主布局组件Home.js的页面，Home.js中通过Route设置默认页面为<Dashboard/>，但该组件始终无法显示。以下是相关代码：

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;

用户完成登录后跳转至Home.js，代码如下：

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 />} /> {/* 该组件无法显示 */}
        <Route path="/profile" element={<Profile />} />
      </Routes>
    </>
  );
}

export default Home;

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

问题原因与解决方案 #

1. 外层路由匹配规则错误 #

App.js中使用path="*"作为Home组件的路由，这种通配符匹配会捕获所有未定义路径，但无法正确传递路径信息给Home内部的子路由。且如果登录后跳转根路径/，会直接命中Login的路由，无法进入Home。

修改App.js路由配置：
给Home设置明确的父路径，并添加/*允许子路由匹配：

<Route path="/home/*" element={<Home />} />

2. 子路由路径使用绝对路径导致匹配失败 #

Home.js中Profile的路由用了path="/profile"（绝对路径），会直接匹配根路径下的/profile，而非/home/profile。同时index路由需要父路由/home被匹配时才会渲染Dashboard，因此登录后必须跳转到/home。

修改Home.js子路由配置：
将Profile的路径改为相对路径（去掉前缀/）：

<Routes>
  <Route index element={<Dashboard />} />
  <Route path="profile" element={<Profile />} />
</Routes>

3. 登录跳转路径调整 #

确保登录成功后的跳转目标是/home，而非根路径/，这样才能触发Home组件及其内部的index路由，显示Dashboard。

内容的提问来源于stack exchange，提问作者Josh Lee