Redirect is not working, while trying to move a page

Question

Hi I am pretty new to ReactJS, I am trying to move to the login page when Logout is clicked, the function is getting executed but it wont redirect to the login page. I don't know how to do it. I have tried using this.props.history.push but that is also not working. I have also tried using Redirect to="/login" in the fakeAuth.signout function.

     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;

I want to redirect to the login page once the Logout is clicked — kshitiz, Aug 18 '18 at 09:11
I found: https://stackoverflow.com/questions/43230194/how-to-use-redirect-in-the-new-react-router-dom-of-reactjs — Nguyễn Thắng, Aug 18 '18 at 09:33
it does not work it throws an error that should not be used outside tag — kshitiz, Aug 18 '18 at 10:03
First of all you should not call component inside a function, just inside render function. — jsDevia, Aug 18 '18 at 10:33

morteza ataiy · Answer 1 · 2018-08-20T08:17:27.360

0

You can use "State" and chang this page without Redirect.

For example:

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
}

edited Aug 20 '18 at 08:17

answered Aug 19 '18 at 12:04

morteza ataiy

541
4
12

i am getting an error "You should not use outside " – kshitiz Aug 20 '18 at 05:25

score 0 · Answer 2 · answered Mar 13 '19 at 05:17

0

this is working

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

answered Mar 13 '19 at 05:17

kshitiz

65
6

Redirect is not working, while trying to move a page

2 Answers2