React Router v6.23.0：如何用createBrowserRouter实现弹窗背景路由保留

我正尝试将原有路由代码迁移至React Router v6.23.0的createBrowserRouter写法，目标是实现弹窗（Modal）导航逻辑：从列表页（如/home）打开/posts/:id详情弹窗时，不离开当前页面，保留背景页面的路由状态，关闭弹窗后可返回原页面。

原有实现代码 #

const App = () => {
  const location = useLocation()
  const background = location.state?.backgroundLocation

  return (
    <>
      <Routes location={background ?? location}>
        <Route element={<DashboardLayout />} errorElement={<NotFound />}>
          <Route index element={<Home />} />
          <Route element={<ModalLayout />}>
            <Route path="/posts/:id" element={<Post />}></Route>
          </Route>
        </Route>
      </Routes>
    </>
  )
}

export default App

当前已编写的createBrowserRouter代码 #

const router = createBrowserRouter([
  {
    element: <AuthProviderLayout />,
    errorElement: <Error />,
    children: [
      {
        path: '/',
        element: <DashboardLayout />,
        children: [
          {
            index: true,
            element: <Home />
          },
          {
            element: <ModalLayout />,
            children: [
              {
                path: '/posts/:id',
                element: <Post />
              }
            ]
          },
        ]
      },
    ]
  }
])

export default router

疑问 #

如何在createBrowserRouter中实现原代码里<Routes location={background ?? location}>的功能？是否需要在DashboardLayout中添加条件判断？

现有DashboardLayout代码：

import { Outlet, useLocation } from 'react-router-dom'
const DashboardLayout = () => {
  const location = useLocation()
  const background = location.state?.backgroundLocation
  return (
    <>
      <Outlet />
    </>
  )
}

export default DashboardLayout

解决方案 #

核心逻辑调整 #

原代码中通过根<Routes>的location属性切换渲染背景路由，在createBrowserRouter模式下，我们需要把这个逻辑转移到DashboardLayout内部，通过嵌套<Routes>分别渲染背景页面和弹窗内容。

1. 修改DashboardLayout #

在布局中添加嵌套路由，根据background状态判断渲染目标：

import { useLocation, Routes, Route } from 'react-router-dom'
import Home from './Home'; // 引入你的首页组件
import ModalLayout from './ModalLayout'; // 引入弹窗布局
import Post from './Post'; // 引入文章详情组件

const DashboardLayout = () => {
  const location = useLocation();
  const background = location.state?.backgroundLocation;

  return (
    <>
      {/* 渲染背景页面：优先用background状态里的路由，否则用当前路由 */}
      <Routes location={background ?? location}>
        <Route index element={<Home />} />
        {/* 这里添加其他需要在背景显示的路由，比如列表页、设置页等 */}
      </Routes>

      {/* 当存在background时，说明当前是弹窗状态，渲染弹窗路由 */}
      {background && (
        <Routes location={location}>
          <Route element={<ModalLayout />}>
            <Route path="/posts/:id" element={<Post />} />
          </Route>
        </Routes>
      )}
    </>
  )
}

export default DashboardLayout

2. 简化createBrowserRouter配置 #

移除原配置中的弹窗子路由，因为弹窗路由现在由DashboardLayout内部处理：

const router = createBrowserRouter([
  {
    element: <AuthProviderLayout />,
    errorElement: <Error />,
    children: [
      {
        path: '/',
        element: <DashboardLayout />
        // 这里不再需要弹窗相关的子路由
      },
    ]
  }
])

export default router

3. 弹窗触发与关闭逻辑 #

打开弹窗（以Home组件为例）

调用navigate时传递backgroundLocation状态，记录当前背景路由：

import { useNavigate } from 'react-router-dom';

const Home = () => {
  const navigate = useNavigate();

  const openPostModal = (postId) => {
    navigate(`/posts/${postId}`, {
      state: { backgroundLocation: window.location }
    });
  };

  return (
    <div>
      <button onClick={() => openPostModal(1)}>打开文章1详情</button>
    </div>
  );
};

export default Home;

关闭弹窗（以Post组件为例）

返回背景路由或直接回退：

import { useNavigate, useLocation } from 'react-router-dom';

const Post = () => {
  const navigate = useNavigate();
  const location = useLocation();

  const closeModal = () => {
    // 优先跳转到背景路由，否则回退到首页
    navigate(location.state?.backgroundLocation || '/');
  };

  return (
    <div className="modal">
      <h1>文章详情</h1>
      <button onClick={closeModal}>关闭弹窗</button>
    </div>
  );
};

export default Post;

关键说明 #

• 原根<Routes>的location切换逻辑，转移到了DashboardLayout内部的嵌套路由中
• 通过background状态区分是否显示弹窗，确保背景页面的路由状态完全保留
• 弹窗路由不再需要在createBrowserRouter的顶层配置中定义，由布局内部独立处理

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