我正在尝试来自 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
组件中?
最佳答案
我认为这可行:
const routes = (props) => [
{
path: "/",
element: <Main {...props} />
}
];
const App = ({ isLoading }) => {
const routing = useRoutes(routes({isLoading}));
return (
<>
{routing}
{JSON.stringify(isLoading)}
</>
);
};
关于javascript - 使用 useRoutes 时如何将 props 传递给路由组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64880605/