React Router v6中使用Navigate组件实现不同路由模态框展示问题

我用React Router v6官方的模态框示例做开发，想实现点击链接时，在模态框里展示gallery/:counter路由的内容。目前的路由代码如下：

<Routes location={state?.backgroundLocation || location}>
  <Route path="/" element={<Layout />}>
    <Route index element={<Home />} />
    <Route path="gallery/:counter" element={<Gallery />} />
    <Route path="*" element={<NoMatch />} />
  </Route>
</Routes>

{/* 有backgroundLocation时显示模态框 */}
{state?.backgroundLocation && (
  <Routes>
    <Route path="/modal/:counter" element={<Modal />} />
  </Routes>
)}

现在遇到的问题是：点击“Modal”链接后，我想让模态框里显示gallery/:counter的内容，但试了<Navigate />会导致整页跳转，不知道还有什么办法能触发这个路由的渲染。

解决办法 #

办法1：直接在模态框里渲染Gallery组件 #

没必要单独搞/modal/:counter路由，直接把Gallery组件放到模态框里，参数可以通过路由状态（state）传递。

先改触发模态框的链接：

<Link 
  to="/modal" 
  state={{ 
    backgroundLocation: location, 
    counter: 2 // 换成你实际要传的counter值
  }}
>
  打开模态框看Gallery内容
</Link>

然后修改模态框的渲染部分：

{state?.backgroundLocation && (
  <Modal>
    <Gallery counter={state.counter} />
  </Modal>
)}

如果Gallery原来靠useParams()拿参数，要么改成从useLocation()里读state的counter，要么直接通过props传进去就行。

办法2：让模态框路由复用Gallery组件 #

调整模态框的路由定义，直接指向包裹了Gallery的Modal组件，这样跳转/modal/:counter时，模态框里就会显示Gallery内容：

<Routes location={state?.backgroundLocation || location}>
  <Route path="/" element={<Layout />}>
    <Route index element={<Home />} />
    <Route path="gallery/:counter" element={<Gallery />} />
    <Route path="*" element={<NoMatch />} />
  </Route>
</Routes>

{state?.backgroundLocation && (
  <Routes location={location}> {/* 用当前location渲染模态框路由 */}
    <Route path="/modal/:counter" element={<Modal><Gallery /></Modal>} />
  </Routes>
)}

点击链接时直接跳/modal/:counter，Gallery就能通过useParams()拿到counter参数，同时背景页面还是原来的内容，不会整页跳转。

办法3：用嵌套路由+Outlet重构结构 #

如果模态框是全局显示的，可以把路由结构改成顶层嵌套，让背景内容和模态框路由共存，用Outlet渲染背景：

<Routes>
  <Route element={<GlobalLayout />}>
    {/* 背景路由 */}
    <Route path="/" element={<Layout />}>
      <Route index element={<Home />} />
      <Route path="gallery/:counter" element={<Gallery />} />
      <Route path="*" element={<NoMatch />} />
    </Route>
    {/* 模态框路由，叠加在背景上 */}
    <Route path="/modal/:counter" element={<Modal><Gallery /></Modal>} />
  </Route>
</Routes>

在GlobalLayout里处理模态框的显示逻辑，确保背景内容和模态框能同时渲染。

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