React中React-Router-Dom嵌套路由无法正常工作问题

你的核心问题是未正确使用React Router v6的嵌套路由机制，导致主内容无法正常切换，同时存在路由上下文冲突的问题。以下是具体修复方案：

问题分析 #

1. 重复路由上下文：Home组件中重复引入BrowserRouter，会与App.js中的根Router冲突，导致路由逻辑异常。
2. 错误路径配置：Home内的路由使用绝对路径（如/balance），但Home本身挂载在/home路径下，这些绝对路径会直接匹配根路径，而非嵌套在/home下。
3. 未用嵌套路由核心组件：没有使用Outlet组件渲染子路由内容，无法实现布局组件（Navbar/Sidebar/Footer）固定、主内容切换的效果。

修复步骤 #

1. 修改App.js：配置嵌套路由结构 #

将Home作为父路由，把所有子路由定义在其children属性中，子路由路径会自动继承父路径/home：

import React from "react";
import "./App.css";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Login from "./pages/login/Login";
import Registeration from "./pages/registeration/Registeration";
import Home from "./pages/Home/Home";
import Assets from "./components/assets/Assets";
import Balance from "./components/balance/Balance";
import Dashboard from "./components/dashboard/Dashboard";
import OpenAccount from "./components/openAccount/OpenAccount";

function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route
            path="/"
            element={
              <div className="login_page">
                <Login />
              </div>
            }
          />
          <Route
            path="registeration"
            element={
              <div className="login_page">
                <Registeration />
              </div>
            }
          />
          {/* 父路由：Home作为固定布局容器 */}
          <Route path="home" element={<Home />}>
            {/* 默认子路由：访问/home时渲染Dashboard */}
            <Route index element={<Dashboard />} />
            {/* 子路由：/home/balance */}
            <Route path="balance" element={<Balance />} />
            {/* 子路由：/home/assets */}
            <Route path="assets" element={<Assets />} />
            {/* 子路由：/home/open-account */}
            <Route path="open-account" element={<OpenAccount />} />
          </Route>
        </Routes>
      </Router>
    </div>
  );
}

export default App;

2. 修改Home.jsx：使用Outlet渲染子内容 #

移除重复的路由上下文，用Outlet组件替换原Routes区域，专门渲染嵌套子路由的内容：

import React from "react";
import { Outlet } from "react-router-dom";
import { Footer } from "../../components/Footer/Footer";
import Navbar from "../../components/navbar/Navbar";
import Sidebar from "../../components/sidebar/Sidebar";
import "./Home.scss";

const Home = () => {
  return (
    <div className="home">
      <Sidebar />
      <div className="homeContainer">
        <Navbar />
        {/* Outlet自动渲染匹配的子路由组件 */}
        <Outlet />
        <Footer />
      </div>
    </div>
  );
};

export default Home;

关键说明 #

• Outlet是React Router v6嵌套路由的核心组件，会在父路由组件中渲染当前匹配的子路由内容。
• 父路由的index子路由用于设置访问父路径（如/home）时的默认渲染组件。
• 子路由路径均为相对路径，会自动拼接父路由路径（如balance会解析为/home/balance）。

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