javascript - 登录或退出后重定向到其他页面而不丢失状态

Question

基本上，我只需要在登录或注销后将用户重定向到索引页面而不丢失状态。在我的 main.js 中:

render() {
   return(
      <div id="main">
         <Router>
            <Menu />
            <Switch>
               <Route exact path='/' component={Home}>
               <Route exact path='/about' component={About}>
               <Route exact path='/contact' component={Contact}>
            </Switch>
         </Router>
      </div>
   )
}

菜单.js:

import { Redirect } from 'react-router'
constructor() {
   super()
   this.state = {
      login: false
   }
   this.onLogin = this.onLogin.bind(this)
}

onLogin() {
   ...some declarations and states
   this.setState({login: true})
}

render(){
   if (this.state.login === true) {
      return <Redirect to='/'>
   }
   return(
      <div>
         <LoggedOut onLogin={this.onLogin}/>
         <LoggedIn />
      </div>
   )
}

loggedout.js

render(){
   return(
      <div>
         <button onClick={this.props.onLogin}>Log-In</button
      </div>
   )
}

重定向有效，但我失去了使该用户保持登录状态的状态。我尝试过 { browserHistory } 但给出了相同的结果。我尝试过 History.push('/') 但我一定错过了一些东西，而且我总是丢失所有状态。我是 ReactJs 新手，我真的需要你的帮助。谢谢。

Answer 1

我认为这里应用的最佳模式是使用 React context api。使用此 api 时，您可以在应用程序中的任何位置访问登录状态。

import { createContext } from 'react';

const AuthContext = createContext({
  loggedIn: null,
  login: () => {},
  logout: () => {}
});

export default AuthContext;

function App() {
  const [loggedIn, setLoggedIn] = useState(false);

  const login = () => {
    setLoggedIn(true);
  };

  const logout = () => {
    setLoggedIn(false);
  };

  return (
    <div id="main">
       <Router>
         <AuthContext.Provider value={{ loggedIn, login, logout }}>
           <Menu />
           <Switch>
             <Route exact path='/' component={Home}>
             <Route exact path='/about' component={About}>
             <Route exact path='/contact' component={Contact}>
           </Switch>
         </AuthContext.Provider>
       </Router>
    </div>
  );
}

export default App;

要在导航栏中使用它，您可以调用 useContext Hook 并将 AuthContext 作为参数传递:

import React, { useContext } from 'react';
import { NavLink } from 'react-router-dom';
import AuthContext from '../../context/AuthContext';

function Navigation() {
  const { loggedIn, logout } = useContext(AuthContext);
  return (
    <div>
      {!loggedIn && (
        <li>
          <a to="/auth">Login</a>
        </li>
      )}
      {loggedIn && (
        <>
          <li>
            <a to="/bookings">Bookings</a>
          </li>
          <li>
            <button onClick={logout}>Logout</button>
          </li>
        </>
      )}
    </div>
  );
}

export default Navigation;