如何在用户单击注销后正确重定向

Question

应用程序函数有一个路由器，我很好地在组件中使用它们，感谢您的帮助。。。。

function App() {
return (
<Router>
<div className='App'>
<Switch>
<Route exact path='/'>
<Login />
</Route>
<Route path='/SignUp'>
<SignUp />
</Route>
</Switch>
<Route
path='/Student/:id'
exact
render={({ match }) => <Student match={match} />}
/>
<Route
path='/Admin/:id'
exact
render={({ match }) => <Admin match={match} />}
/>
</div>
</Router>
);
}
export default App;

---

只需要在管理员决定点击注销按钮后使用重定向而不使用usehistory。

const Admin = () => {
const logoutfunc = async () => {
let connectToServer = new ConnectToServer();
//let session=await connectToServer.getSession()
connectToServer.logout();
};
const redirect = () => {
return <Redirect to={{ pathname: '/' }} />;
};
return (
<div>
<button
onClick={() => {
logoutfunc();
redirect();
}}
>
logout
</button>
<Cards />
<TableStudent />
<Cohorts />
</div>
);
};
export default Admin;

Answer 1

您要做的是：

const Admin = () => {
const [redirect, setRedirect] = useState(false);
const logoutfunc = async () => {
let connectToServer = new ConnectToServer();
//let session=await connectToServer.getSession()
connectToServer.logout();
setRedirect(true);
};
if(redirect){
return <Redirect to={{ pathname: '/' }} />;
};
return (
<div>
<button
onClick={logoutfunc}
>
logout
</button>
</div>
);
};

或者使用像这样的push方法：

const Admin = () => {
const logoutfunc = async () => {
let connectToServer = new ConnectToServer();
//let session=await connectToServer.getSession()
connectToServer.logout();
history.push({ pathname: '/' })
};
return (
<div>
<button
onClick={logoutfunc}
>
logout
</button>
</div>
);
};