使用createBrowserRouter时上下文变量变更导致页面整体重挂载的问题排查与解决方案咨询

我太懂你这种困扰了——之前用<BrowserRouter>的时候，全局Context更新只会触发组件刷新，不会让整个页面重挂载，空依赖的useEffect安安稳稳只跑一次；结果换成createBrowserRouter为了用ScrollRestoration，却碰到Context变量一更新，所有组件就被重新挂载，那些本该只执行一次的初始化逻辑反复触发，简直头大！

先搞清楚问题出在哪 #

看你的App.js代码，核心问题出在路由实例的创建时机和Context Provider的位置上：

1. 你在App组件内部直接创建了router实例：const router = createBrowserRouter([...])。每次App组件里的loggedInAs、loginIsOpen这些状态变化时，App会重新渲染，这时候router会被重新创建成一个全新的对象。
2. RouterProvider一旦接收到新的router prop，就会认为整个路由配置都变了，直接卸载旧的路由树、重新挂载新的——这就导致所有子路由组件、包括Layout里的组件都被完全重挂载，空依赖的useEffect自然会重新执行。

而之前用<BrowserRouter>的时候，它是一个组件，内部自己管理路由状态，你不会每次渲染都重新创建一个新的<BrowserRouter>组件实例，所以路由树不会被重建，Context更新只会触发组件刷新而非重挂载。

给你两个可行的解决方案 #

方案一：把Context Provider移到RouterProvider外面（最推荐）

这个方案能从根源上避免路由树被重建，同时保持ScrollRestoration的功能：

import { useState, useMemo } from 'react'
import Home from './pages/Home'
import User from './pages/User'
import Header from './components/Header'
import NotFound from './pages/NotFound'
import Footer from './components/Footer'
import style from './global.module.css'
import { GlobalContext } from './GlobalContext'
import { createBrowserRouter, RouterProvider, Outlet, ScrollRestoration } from "react-router-dom";

function App() {
  const [loggedInAs, setLoggedInAs] = useState(null)
  const [loginIsOpen, setLoginIsOpen] = useState(false)
  const [isLogin, setIsLogin] = useState(true)
  const [loggedInPfp, setLoggedInPfp] = useState(null)

  // 调整Layout，只负责布局结构，不再包裹Context Provider
  function Layout() {
    return (
      <div className={style.siteWrapper}>
        <Header />
        <div className={style.content}>
          <Outlet />
        </div>
        <Footer />
        <ScrollRestoration />
      </div>
    )
  }

  // 用useMemo缓存router实例，避免每次App渲染都重新创建
  const router = useMemo(() => createBrowserRouter([
    {
      element: <Layout />,
      children: [
        { path: "/", element: <Home /> },
        { path: "/user/:username", element: <User /> },
        { path: "/try", element: <User /> },
        { path: "/*", element: <NotFound /> }
      ]
    }
  ]), []); // 空依赖，因为路由配置不会动态变化

  return (
    // 把Context Provider包裹在RouterProvider外面，让整个路由树都能消费Context
    <GlobalContext.Provider value={{
      loggedInAs,
      setLoggedInAs,
      loginIsOpen,
      setLoginIsOpen,
      isLogin,
      setIsLogin,
      loggedInPfp,
      setLoggedInPfp
    }}>
      <RouterProvider router={router} />
    </GlobalContext.Provider>
  )
}

export default App

这样修改后，Context变量更新时，只会触发消费Context的组件刷新，而router实例不会被重新创建，RouterProvider也不会重建路由树，空依赖的useEffect就只会在初始渲染时执行一次了。

方案二：缓存router和Layout组件（适合必须把Context放在Layout里的场景）

如果你的业务逻辑要求Context Provider必须在Layout内部，那就要确保router和Layout不会每次App渲染都被重新创建：

import { useState, useMemo, useCallback } from 'react'
// ...其他导入保持不变

function App() {
  const [loggedInAs, setLoggedInAs] = useState(null)
  const [loginIsOpen, setLoginIsOpen] = useState(false)
  const [isLogin, setIsLogin] = useState(true)
  const [loggedInPfp, setLoggedInPfp] = useState(null)

  // 用useCallback缓存Layout组件，避免每次App渲染都重新定义
  const Layout = useCallback(() => {
    return (
      <div className={style.siteWrapper}>
        <GlobalContext.Provider value={{
          loggedInAs,
          setLoggedInAs,
          loginIsOpen,
          setLoginIsOpen,
          isLogin,
          setIsLogin,
          loggedInPfp,
          setLoggedInPfp
        }}>
          <Header />
          <div className={style.content}>
            <Outlet />
          </div>
          <Footer />
        </GlobalContext.Provider>
        <ScrollRestoration />
      </div>
    )
  }, [loggedInAs, setLoggedInAs, loginIsOpen, setLoginIsOpen, isLogin, setIsLogin, loggedInPfp, setLoggedInPfp]);

  // 用useMemo缓存router实例，依赖Layout组件
  const router = useMemo(() => createBrowserRouter([
    {
      element: <Layout />,
      children: [
        // ...子路由配置不变
      ]
    }
  ]), [Layout]);

  return (
    <RouterProvider router={router} />
  )
}

这个方案通过useCallback缓存Layout，useMemo缓存router，确保只有当Context的value变化时才更新Layout，而router只会在Layout变化时重新创建——不过这个方案的依赖项较多，不如方案一简洁，只推荐在有特殊需求时使用。

最后再确认下效果 #

修改完成后，你可以测试一下：更新Context里的变量（比如触发登录状态变化），你的ExampleComponent里的useEffect应该只会在页面首次加载时打印一次日志，不会再因为Context更新而重复执行了。

备注：内容来源于stack exchange，提问作者user23502562