Question

您好，我对ReactJS还是很陌生，我试图在单击Logout时移至登录页面，该函数正在执行，但不会重定向至登录页面。我不知道该怎么做。我尝试使用this.props.history.push，但这也无法正常工作。我还尝试过在fakeAuth.signout函数中使用重定向到=“ / login ”。

     import React, { Component } from 'react';
     import './App.css';
     import GetTodo from './component/getTodo.js';
     import AddTodo from './component/addTodo.js';
     import Login from './component/login.js';
     import {BrowserRouter as Router,Switch,Route,Link,Redirect} from 
     'react-router-dom';
     export const fakeAuth = {
       isAuthenticated: false,
       authenticate(cb) {
        this.isAuthenticated = true;
       },
       signout(cb) {
       this.isAuthenticated = false;
       }
      }
      const PrivateRoute = ({ component: Component, ...rest }) => (
      <Route {...rest} render={(props) => (
         fakeAuth.isAuthenticated === true
         ? <Component {...props} />
         : <Redirect to='/login' />
      )} />
     )
   class App extends Component {
     constructor(props){
      super(props);
       this.newsignout=this.newsignout.bind(this);
     }
    newsignout(){
      fakeAuth.signout();
      localStorage.clear();
      <Redirect to="/login" />
    }
    render() {
      return (
       <Router>
        <div className='App'>
                <nav className="navbar navbar-expand-lg navbar-light bg-light">               
                      <div className="collapse navbar-collapse">
                            <div className="navbar-nav">
                                  <div className="nav-item nav-link"><Link to={'/'}>GET TODO LIST</Link></div>
                                  <div className="nav-item nav-link"><Link to={'/add'}>ADD TODO</Link></div>
                                  <div className="nav-item nav-link"><Link to={'/login'}>LOGIN</Link></div>
                                  <div className="nav-item nav-link "><div className="LogOut" onClick={()=>this.newsignout()}>LOGOUT</div></div>
                            </div>
                      </div>
                </nav>
                <Switch>
                      <PrivateRoute exact path='/' component={GetTodo} />
                      <PrivateRoute path='/add/:id' component={AddTodo} />
                      <PrivateRoute exact path='/add' component={AddTodo} />
                      <Route path='/login' component={Login}/>
                </Switch>
        </div>  
    </Router>
   );
  }
}

export default App;

Answer 1

您可以使用“状态”来更改此页面而无需重定向。

例如：

class MyComponent extends React.Component {
  constructor(){
    super();
    state = {
      isLogin: true
    }
  }

  newsignout(){
      this.setState({ isLogin: false });
    }

  render () {
    const { isLogin } = this.state;

     if (!isLogin) {
       return <LoginPage />; // for example
     }

     return <RenderYourForm/>; // other code
}

尝试移动页面时重定向不起作用

1 个答案: