React Router V6 路由组件需要来自另一个路由组件的状态/道具

Question

您好，我正在为我的应用程序使用 React 路由器。 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} />} />
    <Route path="/individual_project" element={<IndividualProject />} />
  </Routes>

最后一条路线（/individual_project）需要位于项目组件中的道具。 由于我无权访问 App.js 中的组件，我该如何创建这条路线。

我也不希望将 state 变量从 Projects 组件中移出并通过 props 向下传递。

Answer 1

有几种方法可以实现：

• 您可以像这样在Projects组件内移动individual_project路由：

const Projects = () => {
...other logic
return(
 <Routes>
   <Route path="/individual_project" element={<IndividualProject />} />
 </Routes>
)
}

文档在这里： https://reactrouter.com/docs/en/v6/getting-started/overview#nested-routes

• 或者，您也可以创建一个上下文来包装路由。 然后，您可以直接从上下文中检索变量：

<Context.Provider value={yourValuesToShare}>
 <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} />} />
    <Route path="/individual_project" element={<IndividualProject />} />
 </Routes>
</Context.Provider>

文档在这里： https://reactjs.org/docs/context.html

Answer 2

对于这种情况，建议使用Context API它比其他技术更精确、更清晰。 反应文档

Answer 3

上下文 api 用于从任何组件访问 state，因此建议使用 react 上下文 api