React Router跳转空白页求助：实现嵌套菜单与页面跳转

1. 核对路由核心配置 #

• 确认根组件已用 <BrowserRouter>（或 HashRouter）包裹，所有路由相关组件必须处于该容器范围内。
• 检查路由路径匹配：跳转目标路径（比如/products）需与<Route>配置的path完全一致，注意大小写、斜杠等细节。React Router v6+ 必须使用 <Routes> 嵌套 <Route>，废弃了v5的<Switch>，混用会导致路由不匹配。
• 示例正确路由配置：

  import { BrowserRouter, Routes, Route } from 'react-router-dom';
  import Layout from './Layout';
  import BrowserHomeCategory from './BrowserHomeCategory';
  import Products from './Products';
  
  function App() {
    return (
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Layout />}>
            <Route index element={<BrowserHomeCategory />} />
            <Route path="products" element={<Products />} />
          </Route>
        </Routes>
      </BrowserRouter>
    );
  }
  

2. 确认跳转方式合规 #

• 禁止使用原生<a>标签跳转，需用React Router提供的<Link>组件，避免页面全量刷新：

  import { Link } from 'react-router-dom';
  // BrowserHomeCategory组件内的跳转写法
  <Link to="/products">Products</Link>
  

• 编程式跳转需正确调用useNavigate钩子：

  import { useNavigate } from 'react-router-dom';
  const navigate = useNavigate();
  const handleProductClick = () => navigate('/products');
  

3. 排查Products组件本身问题 #

• 简化Products.js代码至最简形式，测试基础渲染：

  function Products() {
    return <div>Products Page Test Content</div>;
  }
  export default Products;
  

  若仍空白，检查组件是否正确导出、导入路径是否有误，同时打开浏览器控制台（F12）查看语法错误、依赖缺失等报错信息。

4. 嵌套路由布局检查 #

• 若左侧树形导航属于布局组件，需在布局内用<Outlet>渲染子路由内容（React Router v6+ 嵌套路由必备）：

  import { Outlet, Link } from 'react-router-dom';
  function Layout() {
    return (
      <div className="layout">
        {/* 左侧树形导航 */}
        <aside>
          <Link to="/">Home</Link>
          <Link to="/products">Products</Link>
        </aside>
        {/* 子页面渲染区域 */}
        <Outlet />
      </div>
    );
  }
  

5. 浏览器路由模式适配 #

• 使用BrowserRouter时，生产环境需配置服务器支持前端路由（如Nginx配置try_files $uri $uri/ /index.html;），否则直接访问子路径会返回404导致空白。开发环境React Dev Server已自动处理，若暂不想配置服务器，可改用HashRouter（路径带#，无需服务器额外配置）。

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