【问题标题】：How to pass props to route components when using useRoutes?使用 useRoutes 时如何将 props 传递给路由组件？
【发布时间】：2021-02-28 23:38:13
【问题描述】：

我正在尝试来自react-router-dom 的新useRoutes 钩子，它似乎很有趣。唯一的问题是，我不知道如何将 props 传递给组件。

之前，我有一个Route 组件，我会在那里选择局部或全局状态的一部分并将其传递，但是我将如何使用useRoutes 来做呢？

在下面的沙箱中，我试图根据isLoading 的布尔值更改背景。我将如何传递isLoading？

编辑

代码如下：

import React from "react";
import { BrowserRouter as Router, Outlet, useRoutes } from "react-router-dom";

const Main = ({ isLoading }) => (
  <div
    style={{
      height: "40vh",
      width: "50vw",
      backgroundColor: isLoading ? "red" : "pink"
    }}
  >
    <Outlet />
  </div>
);

const routes = [
  {
    path: "/",
    element: <Main />
  }
];

const App = ({ isLoading }) => {
  const routing = useRoutes(routes);
  return (
    <>
      {routing}
      {JSON.stringify(isLoading)}
    </>
  );
};

export default function Entry() {
  const [isLoading, setIsLoading] = React.useState(false);

  React.useEffect(() => {
    setInterval(() => {
      setIsLoading(!isLoading);
    }, 3000);
  }, [isLoading]);
  return (
    <Router>
      <App isLoading={isLoading} />
    </Router>
  );
}

编辑

我考虑过将isLoading 参数传递给routes，但我觉得这不是一种有效的方法，因为整棵树都会在任何路线上重新渲染，无论它是否取决于isLoading 或者没有。更好的方法是对依赖于isLoading 的路由使用Switch 和自定义Route 组件，并在该自定义Route 组件中仅使用useSelector？

【问题讨论】：

请将您的代码放在此处，在此站点上，在您的问题中，作为编辑。不要只链接到外部代码仓库。它也需要在这里。只要代码也在这里，您就可以保留链接。如果代码沙盒死了，您的问题将不再对未来的访问者有帮助，因为他们看不到原始代码。
好的，我添加了代码。

标签： javascript reactjs react-router react-router-dom

【解决方案1】：

更漂亮的是：

const routes = (props) => [
  {
    "/": () => <Main {...props} />
  }
];
    
    
    const App = ({ isLoading }) => {
      const routing = useRoutes(routes(isLoading));

      return (
           <>
               {routing}
               {JSON.stringify(isLoading)}
           </>
      )
    };

【讨论】：

【解决方案2】：

我认为这可行：

    const routes = (props) => [
      {
        path: "/",
        element: <Main {...props} />
      }
    ];
    
    const App = ({ isLoading }) => {
      const routing = useRoutes(routes({isLoading}));
      return (
        <>
          {routing}
          {JSON.stringify(isLoading)}
        </>
      );
    };

【讨论】：

为什么会这样呢？代码转储对学习没有帮助。解释这些变化，以便 op 可以学习
代码转储很好，我知道他在说什么。我只是想知道这是否是only 方式
@MikeK 我还没有研究过，但也许你可以用你的isLoading 状态创建一个context，将你的路由包装在上下文提供程序中，让你的组件从上下文。但是，会不会太过分了？这取决于您的实际用例。

【解决方案3】：

您可以创建一个函数，将构造的数组返回给 useRoutes 钩子，而不是传递数组：

const routes = (isLoading) => [
  {
    path: "/",
    element: <Main isLoading={isLoading} />
  }
];

代码沙箱： https://codesandbox.io/s/dark-dream-hx1y9

【讨论】：

我想过这个，但这是唯一的方法吗？整个树将重新渲染，如果有很多孩子，它可能会变得低效。使用 Redux 的 useSelector 让第 n 个孩子意识到某种状态变化很简单，但如果 Redux 不在我的支配下，这是我唯一的方法吗？