[英]React JS React-router-dom Navigate not working
我尝试在登录我的 React 应用程序后重定向用户,但导航不起作用,我不知道为什么......
这是我的代码,感谢您的帮助
import React, { Component } from "react";
import {Route, Navigate} from 'react-router-dom';
import Bouton from "../components/Bouton";
class Dallan extends Component{
logout = () =>{
localStorage.removeItem('logged');
return <Navigate to= '/login' />;
}
render(){
return(
<Bouton typeBtn = 'btn-danger' click={() => this.logout()}>Deconnexion</Bouton>
)
}
}
export default Dallan;
在我的 App.js 中
function App() {
let session = localStorage.getItem('logged');
return (
<BrowserRouter>
<Routes>
<Route path="/" element={session ? <Navigate to="/dallan" /> : <Login/>} />
<Route path='/dallan' element={<Dallan/>}/>
</Routes>
</BrowserRouter>
);
}
export default App;
如果您使用的是 react route dom v6,我假设您使用的是<Navigate />
那么<Navigate />
是一个需要渲染才能工作的组件。 您只是将其还原为空,因此显然不会渲染。 您想改用useNavigate()
挂钩。 但是您需要使用 function 组件来使用挂钩。 像这样:
import React, { Component } from "react";
import {Route, useNavigate} from 'react-router-dom';
import Bouton from "../components/Bouton";
function Dallan() {
const navigate = useNavigate();
const logout = () =>{
localStorage.removeItem('logged');
navigate('/login')
}
return(
<Bouton typeBtn = 'btn-danger' click={() => logout()}>Deconnexion</Bouton>
)
}
export default Dallan;
从技术上讲,它应该可以尝试这样写, return <Navigate replace={true} to='/' />
确保放置 replace={true} 因为它的工作是重定向,这意味着它将页面上的所有内容替换为 where您正在重定向到用户
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.