React Router v6：如何让嵌套路由在新页面而非Doctor路由内渲染

你当前的路由配置中，/home被嵌套在doctor路由下，但要让Homepage组件在新页面独立渲染（不嵌套在Doctor组件内部），只需调整路由结构即可：

修改后的路由代码 #

function App() {
  return (
    <Router>
        <Routes>
          <Route path='/' element={<Home/>}/>
          <Route path='doctor' element={<Doctor/>} />
          {/* 将/home路由从doctor的子路由中移出，作为顶层同级路由 */}
          <Route path='/home' element={<Homepage/>}/>
          <Route path='admin' element={<Admin/>}/>
        </Routes>
    </Router>
  );
}

关键说明 #

• React Router v6中，嵌套路由的生效依赖相对路径和父组件内的<Outlet/>：如果子路由使用相对路径（不以/开头），它的组件会渲染在父路由组件的<Outlet/>位置；而绝对路径的路由会直接匹配根路径，不受父路由影响，但将独立路由放在顶层同级结构更清晰。
• 把/home移到<Routes>的顶层后，它会作为独立路由渲染，完全替换当前页面内容，不会嵌套在Doctor组件内部。

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