- 已关闭。**此问题为not reproducible or was caused by typos。当前不接受答案。
这个问题是由打字错误或无法再重现的问题引起的。虽然类似的问题在这里可能是on-topic,但这个问题的解决方式不太可能帮助未来的读者。
13小时前关门了。
Improve this question
当user为false时,我想使用useNavigate将用户定向到/register页面,而不是转到主页,但它一直给我一个错误:(useNavigate()只能在组件上下文中使用。)请记住,我不想使用redirect,因为我当前版本的react-router-dom不支持它。 component.) Keep in mind I do not want to use redirect because my current version of react-router-dom does not support it. here is my code:
const App = () => {
const user = false;
const navigate = useNavigate();
return (
<div className="bg-[#0b0b0b]">
<Router>
<Routes>
{user ? (<Route path="/" element={<Home />} />) : (navigate("/register"))}
<Route path="/movies" element={<Home type="movie" />} />
<Route path="/series" element={<Home type="series" />} />
<Route path="/watch" element={<Watch />} />
<Route path="/register" element={<Register />} />
<Route path="/login" element={<Login />} />
</Routes>
</Router>
</div>
)
}
export default App
1条答案
按热度按时间pb3skfrl1#
useNavigate
钩子不能在为其提供路由上下文的任何路由器外部使用。要解决此错误,您应该将提供路由上下文的Router
组件在ReactTree中提升到高于App
组件的位置,以便可以在那里使用它。不过,您不需要在
App
组件中使用useNavigate
钩子,只需在其位置呈现一个Navigate
组件来发出声明性导航操作即可。看起来这段代码正朝着路由保护实现的方向发展,完整的例子请参见我的答案here。