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

【问题标题】：Redirect is not working, while trying to move a page尝试移动页面时重定向不起作用
【发布时间】：2019-01-25 04:25:37
【问题描述】：

您好，我是 ReactJS 的新手，我试图在单击 Logout 时移至登录页面，该功能正在执行，但它不会重定向到登录页面。我不知道该怎么做。我尝试过使用this.props.history.push，但这也不起作用。我还尝试在 fakeAuth.signout 函数中使用 Redirect to="/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;

【问题讨论】：

点击注销后我想重定向到登录页面
我找到了：stackoverflow.com/questions/43230194/…
它不起作用它会抛出一个错误，即不应在标签之外使用
首先你不应该在函数内部调用组件，只在渲染函数内部调用。
使用“状态”并在不重定向的情况下更改此页面。

标签： javascript reactjs

【解决方案1】：

这是有效的

       <div className="nav-item nav-link "><Link to={'/login'} className="LogOut" onClick={()=>this.newsignout()}>LOGOUT</Link></div>

【讨论】：

【解决方案2】：

您可以使用“状态”并在不重定向的情况下更改此页面。

例如：

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
}

【讨论】：

我收到一个错误“您不应该在之外使用 ”