反应路线-注销无法重定向到正确的页面

Question

当我点击侧边菜单中的注销时，
它应该返回到 /login，但仍保持在同一路径 /home 中，内容消失。

App.js 中几个状态的解释

import React, { Component } from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import { Redirect } from "react-router";

import Login from "./Login";
import Drawer from "./Drawer";

console.warn = console.error = () => {};

class App extends Component {
  state = {
    isAuthenticated: false,
    isAuthenticating: true,
    user: null
  };

  setAuthStatus = (authenticated) => {
    this.setState({ isAuthenticated: authenticated });
  };

  setUser = (user) => {
    this.setState({ user: user });
  };

  handleLogout = async () => {
    try {
      //Sign Out api runs here
      this.setAuthStatus(false);
      this.setUser(null);
    } catch (error) {
      console.log(error);
    }
  };

  async componentDidMount() {
    try {
      // run api change to auth setAuthStatus
      // if api no return error > continue
      this.setAuthStatus(true);
      let user = { id: 123 };
      this.setUser(user);
    } catch (error) {
      console.log(error);
    }
    this.setState({ isAuthenticating: false });
  }

  render() {
    const authProps = {
      isAuthenticated: this.state.isAuthenticated,
      user: this.state.user,
      setAuthStatus: this.setAuthStatus,
      setUser: this.setUser
    };
    return (
      !this.state.isAuthenticating && (
        <React.Fragment>
          {this.state.isAuthenticated ? (
            <Drawer
              props={this.props}
              auth={authProps}
              handleLogout={this.handleLogout}
            />
          ) : (
            <BrowserRouter>
              <Switch>
                <Redirect exact from="/" to="/Login" />
                <Route
                  path="/login"
                  render={(props) => <Login {...props} auth={authProps} />}
                />
              </Switch>
            </BrowserRouter>
          )}
        </React.Fragment>
      )
    );
  }
}

export default App;

isAuthenticating:
componentDidMount会调用api查看会话是否继续，
如果是，isAuthenticating 等于 true，可以防止在刷新页面或转到其他路由时丢失当前会话中的用户身份验证。

已通过身份验证：
如果 !isAuthenticated > 必须留在/重定向到登录页面

沙盒：
https://codesandbox.io/s/restless-breeze-p5uih?file=/src/App.js

Answer 1

我在沙盒中按预期工作。如果用户使用

注销，则隐藏抽屉和主要内容

this.state.isAuthenticated ? (Drawer) : <Login/>

您应该将抽屉与主要内容分开并将路由器合并在一起。一般来说，您应该只为应用程序使用一个路由器。同时删除重定向：

 <React.Fragment>
          {this.state.isAuthenticated ? (
            <Drawer
              props={this.props}
              auth={authProps}
              handleLogout={this.handleLogout}
            />
          ) : (
            <BrowserRouter>
            <main
          className={clsx(classes.content, {
            [classes.contentShift]: open
          })}
        >
              <Switch>
              {Routes.map((route) => {
              return (
                <Route
                  path={route.path}
                  render={(prop) => (
                    <route.component {...prop} auth={props.auth} />
                  )}
                />
              );
            })}
                <Route
                  path="/login"
                  render={(props) => <Login {...props} auth={authProps} />}
                />
              </Switch>
              </main>
            </BrowserRouter>
          )}
        </React.Fragment>

要路由到注销，首先将浏览器路由器向上移动到 index to wrap 。 这将让您使用 withRouter HigherOrderComponent： export default withRouter(App) 现在您可以从道具访问历史记录并转到登录：

    this.props.history.push("/login")`