如何配置React Router 实现层叠Overlay组件与下层组件同步加载

问题原因 #

你当前的配置触发了React Router中Switch组件的独占匹配逻辑，同时你给/user/:id*路由加了exact精确匹配规则：当访问/user/testUser/item/1时，路径不满足精确匹配/user/:id*的要求，所以只会匹配到*/item/:id对应的ShowItem组件，ProfileView完全不会被渲染，自然看不到下层内容。

修复方案 #

改用嵌套路由结构实现层叠Overlay效果，这是这类需求的标准实现方式：

通用调整 #

移除/user/:id路由的exact属性，让它能匹配所有以/user/:id开头的路径，保证ProfileView在访问/user/testUser/item/1时也能正常渲染。

按React Router版本对应调整 #

React Router v5 版本

1. 外层路由只保留ProfileView的配置，移除外层的ShowItem路由：

<Switch>
  <PrivateRoute
    path="/user/:id"
    component={ProfileView}
  />
</Switch>

2. 在ProfileView组件内部需要渲染Overlay的位置，新增ShowItem的路由配置：

// ProfileView 组件内部
<PrivateRoute
  exact
  path="/user/:id/item/:itemId"
  component={ShowItem}
/>

React Router v6 版本

1. 直接配置嵌套路由，外层路由关联ProfileView，子路由关联ShowItem：

<Routes>
  <PrivateRoute path="/user/:id" element={<ProfileView />}>
    <PrivateRoute path="item/:itemId" element={<ShowItem />} />
  </PrivateRoute>
</Routes>

2. 在ProfileView组件内部需要渲染Overlay的位置，添加<Outlet />组件作为子路由的渲染出口：

// ProfileView 组件内部
<div className="profile-content">
  {/* 原有ProfileView的内容 */}
  <Outlet /> {/* ShowItem浮层会渲染在这里 */}
</div>

调整完成后，访问/user/testUser/item/1时，ProfileView和上层的ShowItem会同时渲染；关闭Overlay跳转回/user/testUser时，只会销毁子路由的ShowItem组件，下层ProfileView不需要重新加载。

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