React-router-dom v6除默认URL外其他路由显示空白页求助

问题出在哪 #

1. /Products等路由空白：你在index.js里把/、/Account、/Dashboard设成了平级路由，但/Products是App组件内部的子路由。当直接访问/Products时，index.js的Routes找不到匹配的路由（只有/、/Account、/Dashboard这三个），所以根本不会渲染App组件，Navbar、Footer和Products自然都不显示，页面就空白了。
2. Dashboard子路由跳转到App：同样是路由层级没搞对，DashboardApp的子路由没有嵌套在/Dashboard路径下，访问子路由时index.js匹配不到，就会 fallback 到/对应的App组件。

具体修复步骤 #

第一步：调整index.js的路由结构 #

把App设为父路由，包含它内部的所有子路由；同时给Dashboard也设置父路由，方便后续加子路由：

import React from 'react';
import App from './App';
import DashboardApp from './DashboardApp';
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.bundle.min";
import { render } from '@testing-library/react';
import { StrictMode } from 'react';
import { BrowserRouter,Routes,Route } from 'react-router-dom';
import Account from './pages/Account';
// 导入App里用到的页面组件
import Home from './pages/Home';
import Products from './pages/Products';
import Contact from './pages/Contact';
import AboutUs from './pages/AboutUs';

render(
  <StrictMode>
    <BrowserRouter>
      <Routes>
        {/* App作为父路由，包含它的子路由 */}
        <Route path='/' element={<App />}>
          <Route index element={<Home />} /> {/* 用index代替空路径，更规范 */}
          <Route path='Products' element={<Products />}/>
          <Route path='Contact' element={<Contact />} />
          <Route path='AboutUs' element={<AboutUs />} />
        </Route>
        <Route path='/Account' element={<Account />}/>
        {/* Dashboard作为父路由，预留子路由位置 */}
        <Route path='/Dashboard' element={<DashboardApp />}>
          {/* 这里添加你的Dashboard子路由，示例： */}
          {/* <Route index element={<DashboardHome />} /> */}
          {/* <Route path='settings' element={<DashboardSettings />} /> */}
        </Route>
      </Routes>
    </BrowserRouter>
  </StrictMode>,
  document.getElementById('root')
);

第二步：修改App.js的路由 #

App里的子路由要改成相对路径（去掉开头的/），确保和父路由层级匹配：

import Products from "./pages/Products";
import Contact from "./pages/Contact";
import AboutUs from "./pages/AboutUs"
import { Routes, Route } from "react-router-dom";
import Home from './pages/Home';
import Footer from "./components/sections/Footer";
import {NavBar} from "./components/sections/NavBar";
import 'bootstrap-icons/font/bootstrap-icons.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'mdb-react-ui-kit/dist/css/mdb.min.css';
import "@fortawesome/fontawesome-free/css/all.min.css";

export default function App() {
  return (
    <>
      <NavBar/>
      <Routes>      
          <Route index element={<Home />} /> {/* index对应父路由的默认路径 */}
          <Route path='Products' element={<Products/>}/>
          <Route path='Contact' element={<Contact />} />
          <Route path='AboutUs' element={<AboutUs />} />
      </Routes>
      <Footer/>
    </>
  );
}

第三步：修复DashboardApp的子路由 #

如果你的DashboardApp有子路由，要使用相对路径，确保嵌套在/Dashboard层级下：

import { Routes, Route } from 'react-router-dom';
import DashboardHome from './pages/DashboardHome';
import DashboardSettings from './pages/DashboardSettings';

export default function DashboardApp() {
  return (
    <>
      {/* 这里放Dashboard的公共组件，比如侧边栏、顶部导航 */}
      <h1>Dashboard</h1>
      <Routes>
        <Route index element={<DashboardHome />} />
        <Route path='settings' element={<DashboardSettings />} />
      </Routes>
    </>
  );
}

重点提醒 #

• React Router v6里，嵌套路由必须通过父路由的children属性定义，子组件通过内部Routes或Outlet渲染子路由内容。
• 子路由路径绝对不能加开头的/，否则会变成全局路径，脱离父路由层级。
• 直接访问子路由时，父路由会自动渲染，所以公共组件（Navbar、Footer）会保留在页面上。

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