React Router Dom路由配置求助：添加博客页面后网站显示异常

我在给网站添加博客页面时遇到了React Router Dom的路由问题，修改前网站正常，添加博客路由后页面显示异常。

我的代码 #

App.js

<Routes>
  <Route path="/" element={<Navbar />}>
    <Route path="" element={<DeliveredComponents />} />
    <Route path="/blog" element={<Blog />} >
      <Route path="" element={<Allbogs />} />
      <Route path=":id" element={<Post />} />
    </Route>
    <Route path="*" element={<NoPage />} /> 
  </Route> 
</Routes> 

DeliveredComponents.js

<div className="container mt-3 text-center" >
  <div className="row">  
    <div className="col-sm-3">{<LeftSideBar />}</div>
    <div className=" col-sm-6   ">
      <div className="container row">
        <div >{<Puzzle/>}</div>            
        <div> 
          <Routes> 
            <Route index element={<Home />} />
            <Route path='/' element={<Home />} />  
            <Route path="/about" element={<About />} />
            <Route path="/category" element={<Category />} />
          </Routes>
        </div>
      </div>
    </div>
    <div className="col-sm-3">{<RightSideBar/>} </div>
  </div>
</div>

问题原因及修复方案 #

1. 父路由缺少<Outlet />

React Router的嵌套路由中，父路由组件必须包含<Outlet />才能渲染子路由的内容。你的Navbar和Blog组件都没加这个标签，导致子路由（比如DeliveredComponents、Allbogs）的内容无法显示。

修复：
在Navbar组件中添加<Outlet />：

import { Outlet } from 'react-router-dom';

function Navbar() {
  return (
    <>
      {/* 你的导航栏内容 */}
      <Outlet /> {/* 子路由内容会在这里渲染 */}
    </>
  );
}

同样，在Blog组件中添加<Outlet />：

import { Outlet } from 'react-router-dom';

function Blog() {
  return (
    <>
      {/* 博客页面的头部/导航内容 */}
      <Outlet /> {/* 渲染Allbogs或Post组件 */}
    </>
  );
}

2. 嵌套路由使用绝对路径引发冲突

DeliveredComponents里的<Routes>用了绝对路径（/about、/category），但它本身是/路径下的子路由，这会导致路由匹配混乱——访问/about时，App.js的根路由和DeliveredComponents里的路由会同时匹配，引发渲染异常。

修复：
把页面级路由统一移到App.js的根路由下，删除DeliveredComponents里的<Routes>：

修改后的App.js：

<Routes>
  <Route path="/" element={<Navbar />}>
    <Route index element={<DeliveredComponents />} /> {/* 根路径渲染首页内容 */}
    <Route path="about" element={<About />} />
    <Route path="category" element={<Category />} />
    <Route path="blog" element={<Blog />}>
      <Route index element={<Allbogs />} />
      <Route path=":id" element={<Post />} />
    </Route>
    <Route path="*" element={<NoPage />} /> 
  </Route> 
</Routes>

修改后的DeliveredComponents.js：

<div className="container mt-3 text-center" >
  <div className="row">  
    <div className="col-sm-3">{<LeftSideBar />}</div>
    <div className=" col-sm-6   ">
      <div className="container row">
        <div >{<Puzzle/>}</div>            
        <div>{<Home />}</div> {/* 直接渲染首页内容 */}
      </div>
    </div>
    <div className="col-sm-3">{<RightSideBar/>} </div>
  </div>
</div>

3. 子路由路径写法优化

根路由下的子路由用index代替空路径path=""，语义更清晰，避免歧义。

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