React Router Dom v6嵌套路由失效问题求助

你的问题出在没有遵循react-router-dom v6的嵌套路由规则，v6要求父路由必须通过Outlet渲染子路由内容，同时路由配置要形成嵌套结构。以下是具体修改步骤：

1. 修改根路由配置（App组件） #

将/sales和/products作为/路由的子路由，形成嵌套关系：

import React from 'react'
import { Routes, Route } from "react-router-dom"
import Global from './global'
import Authentication from './authentication'
import Sales from './pages/Sales' // 根据你的实际文件路径调整
import Products from './pages/Products'

const App = () => {
  return (
    <Routes>
      {/* 父路由：渲染Global组件，同时嵌套子路由 */}
      <Route path="/" element={<Global />}>
        {/* 子路由：路径为相对路径，会自动拼接父路径 */}
        <Route path="sales" element={<Sales />} />
        <Route path="products" element={<Products />} />
        {/* 可选：访问根路径/时显示的默认内容 */}
        <Route index element={<div>请选择左侧菜单进入对应页面</div>} />
      </Route>
      <Route path="/login" element={<Authentication />} />
    </Routes>
  )
}

export default App

2. 在Global组件中添加Outlet #

Outlet是react-router-dom提供的组件，用于渲染父路由下的子路由内容。你可以选择两种方式实现：

方式一：直接在Global中使用Outlet #

修改Global.jsx：

import React from "react";
import Header from "./Header";
import Sidebar from "./Sidebar";
import { Outlet } from "react-router-dom"; // 引入Outlet

const Global = () => {
  return (
    <>
      <Sidebar />
      <Header />
      {/* 子路由内容会渲染到这里 */}
      <div className='content-body'>
        <Outlet />
      </div>
    </>
  );
};

export default Global;

方式二：在MainContent中嵌套Outlet（保留原组件结构） #

如果想保留MainContent组件的结构，修改MainContent.jsx：

import React from 'react'
import { Outlet } from "react-router-dom"

const MainContent = () => {
  return (
    <div className='content-body'>
      {/* 子路由内容会渲染到这里 */}
      <Outlet />
    </div>
  )
}

export default MainContent

Global组件保持原结构即可：

import React from "react";
import Header from "./Header";
import Sidebar from "./Sidebar";
import MainContent from "./MainContent";

const Global = () => {
  return (
    <>
      <Sidebar />
      <Header />
      <MainContent />
    </>
  );
};

export default Global;

原写法失效原因 #

1. 根路由未配置/sales和/products的匹配规则，访问这两个路径时react-router找不到对应路由。
2. 未使用Outlet作为子路由内容的渲染容器，导致子路由无法嵌入Global的布局中。
3. 原MainContent中的Routes使用绝对路径，即使匹配成功，也会脱离Sidebar和Header的全局布局。

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