您应该在React.useEffect()中调用导航()，而不是在组件首次呈现时调用。(React+ReactROuterDom v6)
您应该在React.useEffect()中调用导航()，而不是在组件首次呈现时调用。(React+ReactROuterDom v6)
提问于 2022-05-12 01:34:04
因此，这可能很难在一开始，但我会尝试解释一切可能的。我正在呈现一个App，它使用来自useNavigation库的react-router-dom钩子。在AppRoutes内部，我检查是否有$stateParams.redirect以及其他值，如param1和param2.I get $stateParams，它们来自于我的应用程序中定义的另一个自定义钩子。在运行应用程序时，我得到了日志，should navigate now，但它实际上并没有导航到decider-route页面，而是停留在/，它是<Home />组件。另外，我在控制台You should call navigate() in a React.useEffect(), not when your component is first rendered.中有这个警告，我想知道为什么导航不发生到decider-route，而这个警告是导航没有发生的原因？
const App = () => {
return (
<MemoryRouter>
<AppRoutes />
</MemoryRouter>
)
}
const AppRoutes = () => {
const navigate = useNavigate() // react-router-dom v6
if ($stateParams.redirect) {
if ($stateParams.param1 && $stateParams.param2) {
console.log('StateParams : ', $stateParams)
console.log('Should navigate now!')
navigate(`/decider-route/${$stateParams.param1}/${$stateParams.param2}`)
}
}
return (
<Routes>
<Route path="/" element={<Home />} />
<Route
path="/decider-route/:param1/:param2"
element={<Component />}
/>
</Routes>
)
}Stack Overflow用户
回答已采纳
发布于 2022-05-12 01:55:28
这个错误是非常清楚的。您只需要将navigate()包装在一个useEffect()钩子中，以便在组件挂载后执行它。
但是，在这种情况下，组件第一次呈现时就会调用它。
在这种情况下，navigate()应该由用户操作或useEffect钩子触发。但你没有按规矩行事:)
app.js
const App = () => {
return (
<MemoryRouter>
<AppRoutes />
</MemoryRouter>
);
};
const AppRoutes = () => {
const navigate = useNavigate(); // react-router-dom v6
useEffect(() => {
if ($stateParams.redirect) {
if ($stateParams.param1 && $stateParams.param2) {
console.log("StateParams : ", $stateParams);
console.log("Should navigate now!");
navigate(
`/decider-route/${$stateParams.param1}/${$stateParams.param2}`
);
}
}
}, []);
return (
<Routes>
<Route path="/" element={<Home />} />
<Route path="/decider-route/:param1/:param2 " element={<Component />} />
</Routes>
);
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72209195
复制相关文章
相似问题
腾讯云开发者
