使用useRoutes时如何将道具传递给路由组件？

Question

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

以前，我有一个Route组件，我会在那里选择局部或全局状态的一部分并将其传递，但​​是我将如何使用useRoutes做到这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 。 更好的方法是将Switch和自定义Route组件用于依赖于isLoading路由，并在该自定义Route组件中仅使用useSelector吗？

Answer 1

我认为这会奏效：

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

Answer 2

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

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

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

Answer 3

更漂亮的是：

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

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