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

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;

---

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

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>
  );
};