javascript - 使用 useRoutes 时如何将 props 传递给路由组件？

Question

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

以前，我有一个 Route 组件，我会在那里选择部分局部或全局状态并将其传递，但​​我如何使用 useRoutes?

在下面的沙盒中，我尝试根据 isLoading 的 bool 值更改背景。我将如何传递 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 组件，并且只使用 useSelector 在那个自定义的 Route 组件中？

Answer 1

我认为这可行:

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