React Router V6路由组件如何获取其他路由组件的state/props

不需要把Projects组件的内部状态上移到App层，也不用逐层传props，以下两种方案都可以实现需求，优先选第一种：

方案1：嵌套路由 + Outlet传值（React Router原生支持，无额外依赖） #

React Router v6支持嵌套路由，你可以把/individual_project设为/projects的子路由，不需要调整现有URL路径，就能让IndividualProject直接获取Projects内部的状态。
首先修改App.js的路由配置：

<Routes>
  <Route path="/" element={<Login navigate={navigate} setOverlays={setOverlays} setToken={setToken} setUser={setUser} />} />
  <Route path="/create-account" element={<CreateAccount />} />
  <Route 
    path="/projects" 
    element={<Projects token={token} name={user.name} jobTitle={user.jobTitle} navigate={navigate} setOverlays={setOverlays} />}
  >
    {/* 子路由写绝对路径，访问地址依然是/individual_project，和/projects平级 */}
    <Route path="/individual_project" element={<IndividualProject />} />
  </Route>
</Routes>

之后在Projects组件中，引入Outlet组件，在你需要渲染IndividualProject的位置放置Outlet，同时通过Outlet的context属性把要共享的内部状态传出去：

import { Outlet } from 'react-router-dom'

function Projects() {
  // 这是你组件内部的状态，不需要上移
  const [innerState, setInnerState] = useState(/* 初始值 */)

  return (
    <div>
      {/* Projects自身的业务代码 */}
      
      {/* 子路由渲染位置，把要共享的状态都放到context里 */}
      <Outlet context={{ innerState, setInnerState /* 其他要传的数据 */ }} />
    </div>
  )
}

最后在IndividualProject组件里，调用useOutletContext钩子就能直接拿到Projects传过来的状态，不需要任何额外的props传递：

import { useOutletContext } from 'react-router-dom'

function IndividualProject() {
  const { innerState } = useOutletContext()
  // 直接使用从Projects拿到的状态即可
  return <div>{/* 业务逻辑 */}</div>
}

注意：即使用户直接访问/individual_project路径，React Router也会先挂载父路由对应的Projects组件，完成状态初始化后再渲染子路由IndividualProject，不会出现状态丢失的问题。

方案2：轻量状态共享（适合不想调整路由结构的场景） #

如果你不想改动现有路由的嵌套关系，可以用轻量状态方案实现跨组件共享，不需要把状态上移到App层：

• 项目如果已经接入了Zustand/Jotai这类轻量状态库，直接定义一个公共存储/原子，在Projects组件内把需要共享的状态写入存储，IndividualProject组件直接从存储读取即可，代码侵入性极低。
• 如果不想引入第三方依赖，自己用React的createContext+useContext写一个专属的共享上下文也可以，只要注意Context的Provider包裹范围覆盖两个路由组件即可，不需要包到最外层App。

避坑提醒 #

不要用navigate跳转时携带state的方式传值（即navigate('/individual_project', { state: {...} })），这种方式下用户如果直接刷新/individual_project页面，之前传的state会直接丢失，稳定性无法保证。

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