React Router v6替代v5路由方案咨询：背景运行时显示Modal

在React Router v6中，Route组件必须作为Routes的直接子元素（或嵌套路由的子元素），不能像v5那样在任意位置条件渲染Route。要实现显示Modal时背景组件保持运行的需求，有两种实用方案：

方案一：嵌套路由 + Outlet（适合固定背景页面场景） #

将背景组件设为父路由的内容，Modal作为嵌套子路由的内容。访问子路由时，父组件（背景）会持续渲染，同时渲染Modal：

import { Routes, Route, Outlet } from 'react-router-dom';

// 背景组件（比如短视频列表页）
function ShortsList() {
  return (
    <div className="shorts-background">
      {/* 背景页面内容 */}
      <h1>短视频列表</h1>
      {/* 嵌套路由出口，Modal会渲染在这里 */}
      <Outlet />
    </div>
  );
}

// 路由配置
function AppRoutes() {
  return (
    <Routes>
      {/* 父路由：背景页面 */}
      <Route path="/shorts" element={<ShortsList />}>
        {/* 子路由：Modal，路径会拼接成 /shorts/:shortId */}
        <Route path=":shortId" element={<Modal />} />
      </Route>
      {/* 其他路由 */}
      <Route path="/" element={<Home />} />
    </Routes>
  );
}

方案二：useMatch钩子条件渲染Modal（贴近原v5逻辑） #

如果需要根据background变量动态控制Modal的显示权限，可使用useMatch判断当前路由是否匹配目标路径，然后在背景内容外层条件渲染Modal：

import { Routes, Route, useMatch } from 'react-router-dom';

function App() {
  const background = true; // 你的背景显示条件变量
  // 判断当前路由是否匹配 /shorts/:shortId
  const isShortModalRoute = useMatch('/shorts/:shortId');

  return (
    <>
      {/* 背景内容区域，所有正常路由页面都在这里渲染 */}
      <Routes>
        <Route path="/shorts" element={<ShortsList />} />
        <Route path="/" element={<Home />} />
        {/* 其他路由 */}
      </Routes>

      {/* 满足条件时渲染Modal，背景组件不受影响 */}
      {background && isShortModalRoute && <Modal />}
    </>
  );
}

两种方案都能保证背景组件正常运行，Modal叠加显示。方案一更适合背景是固定页面的场景，方案二更灵活，适配原代码的条件判断逻辑。

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