如何将变量传递给 React 路由中的多个组件

Question

我正在寻找一种将变量 (backend_url={backend_url}) 传递给 React 中的多个组件的简单方法。我目前使用的方式看起来很重复。

<Routes>
          <Route exact path="/posts/:username/newPost" element={<CreatePost backend_url={backend_url}/>} />
          <Route exact path="/posts" element={<PostList backend_url={backend_url}/>} />
          <Route exact path="/posts/:id/" element={<PostDetail backend_url={backend_url}/>} />
          <Route exact path="/posts/:id/delete" element={<DeletePost backend_url={backend_url}/>} />
          <Route exact path="/posts/:id/update" element={<UpdatePost backend_url={backend_url}/>} />
          <Route exact path="/myPosts" element={<MyPosts />} />
</Routes>

非常感谢您就更简单的方法提出的建议。

谢谢。

Answer 1

你可以利用 React Context 系统传递 backend_url 属性。

在 backendUrlContext.js 文件中

import {createContext, useContext} from "react";

const defaultBackendUrlValue = "";

const backendUrlContext = createContext(defaultBackendUrlValue);

export const BackendUrlProvider = backendUrlContext.Provider;
export const BackendUrlConsumer = backendUrlContext.Consumer;

export const useBackendUrl = () => useContext(backendUrlContext);

内部路由文件

import {BackendUrlProvider} from "backendUrlContext";

<BackendUrlProvider value={backend_url}>
  <Routes>
    <Route exact path="/posts/:username/newPost" element={<CreatePost />} />
    <Route exact path="/posts" element={<PostList />} />
    <Route exact path="/posts/:id/" element={<PostDetail />} />
    <Route exact path="/posts/:id/delete" element={<DeletePost />} />
    <Route exact path="/posts/:id/update" element={<UpdatePost />} />
    <Route exact path="/myPosts" element={<MyPosts />} />
  </Routes>
</BackendUrlProvider>

然后您可以使用 useBackendUrl 钩子

访问嵌套在 BackendUrlProvider 内的任何路由元素内的 backend_url 值

import {useBackendUrl} from "backendUrlContext";

function CreatePost() {
  const backendUrl = useBackendUrl();
 
 /*
   ...rest of the logic
 */
}

而且这种方法也适用于任何不是直接嵌套路由的嵌套子组件。

如何将变量传递给 React 路由中的多个组件

How to pass a variable to multiple components in React routes

variables

routes

reactjs