React Router扩展子路由路径时父组件不渲染如何解决

问题本质 #

当前路由配置将/Music-Shop/Products设为平级独立路由，没有声明嵌套关系，路由匹配到更长的子路径时会判定当前平级路由不匹配，直接卸载ProductsHome组件，导致状态丢失。

具体修改步骤 #

• 第一步：重构路由配置，建立父子路由嵌套关系
  给Products父路由的路径末尾加/*通配符，用于匹配所有/Music-Shop/Products开头的子路径，将子路由直接嵌套在父路由内部：

  <Routes>
      <Route path='/Music-Shop' element={<LandingPage />} />
      <Route path='/Music-Shop/Products/*' element={<ProductsHome />}>
          {/* 索引路由：访问/Music-Shop/Products时默认渲染的内容 */}
          <Route index element={<ProductsOverview />} />
          {/* 子路由直接写相对路径即可，无需重复写父级前缀 */}
          <Route path='Instruments' element={<InstrumentsList />} />
          {/* 后续新增子路由直接在这里追加即可，比如path='Accessories' */}
      </Route>
  </Routes>
  

• 第二步：在父组件内添加子路由渲染出口
  在ProductsHome组件中需要展示子页面内容的位置，引入Outlet组件作为子路由的渲染容器。父组件中除了Outlet之外的侧边栏、导航栏、公共筛选区等内容会全程保持挂载，状态不会丢失：

  import { Link, Outlet } from 'react-router-dom';
  
  export default function ProductsHome() {
    return (
      <div className="products-page-container">
        {/* 公共侧边栏：跳转子路由时不会卸载，状态保持 */}
        <nav className="product-sidebar">
          <Link 
            to="/Music-Shop/Products/Instruments" 
            className="sidebarLink"
          >
            乐器类目
          </Link>
          {/* 其他导航链接 */}
        </nav>
        {/* 子路由内容渲染位置：切换子路由时仅这部分内容更新 */}
        <div className="product-content">
          <Outlet />
        </div>
      </div>
    )
  }
  

优化提示 #

在父组件内部写跳转链接时，可以直接使用相对路径，比如把上面Link的to属性改成to="Instruments"，路由会自动基于当前父路径拼接，后续如果调整父路由前缀，不需要批量修改所有子链接。

配置完成后，所有/Music-Shop/Products路径下的子页面跳转，ProductsHome组件都会持续保持渲染，组件内的本地状态、滚动位置、交互状态都不会重置。

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