Redirect doesn't redirect to components

Question

This is my index.js page

import React from 'react';
import ReactDOM from 'react-dom';
import Login from './Login';
import Dashboard from './Dashboard';
import { BrowserRouter as Router, Route} from 'react-router-dom';
import './css/bootstrap.min.css';
import './css/font-awesome.min.css';
import './css/style.css';
import { createHistory, useBasename } from 'history'

const history = useBasename(createHistory)({
    basename: '/'
})   

ReactDOM.render((
  <Router history={history}>
    <div>
       <Route   path="/" component={Login} />
       <Route path="dashboard" component={Dashboard} store={Dashboard} />
       <Route exact path="login" component={Login} store={Login} />
    </div>
  </Router>
),
  document.getElementById('root')
);

This is my login page. But clicking on the button doesn't redirect to the corresponding component.

import React, { Component } from 'react';
   

export default class Login extends Component {
constructor (props){
        super(props);
        this.state = {
            email : '',
            password : '',
            userId : ''
        };
    }

    login(){
      //this.props.router.push('/dashboard'); // Its was not working
      this.props.history.push('dashboard'); //Its working for me
    }
 render() {
    return (
    <div className="container-fluid">
    <div className="row">
        <div className="col-xl-12">    
            <div className="login-page-block-inner">
                <div className="login-page-block-form">
                        <div className="form-actions">
                            <button type="button"  className="btn btn-primary width-150" onClick={(e) => { this.login()} }>Sign In</button>
                        </div>                       
                </div>
            </div>
        </div>
    </div>
</div>
    );
  }
}

Kamran Nazir · Answer 1 · 2018-06-27T08:33:57.903

In your case this.props.router would be undefined. Here's a rough solution that I made. Reading the comments in the code will help.

import React, { Component } from 'react';
import { Redirect } from 'react-router-dom'; // add this import 

export default class Login extends Component {
constructor (props){
        super(props);
        this.state = {
            email : '',
            password : '',
            userId : '',
            redirectToReferrer: true // when you're checking if the user is authenticated you have to keep this false
        };
    }
 //    componentWillReceiveProps(nextProps) {
 //    if ( put your authentication logic here ) {
    //       this.setState({ redirectToReferrer: true });
    //     }
    // }

    login(){
      this.props.history.push('/dashboard');
    }
 render() {
    const from = { pathname: '/dashboard' };
    const { redirectToReferrer } = this.state; // redirectToReferrer is true in the initial state
    if (redirectToReferrer) { // if true the user will be redirected to /dashboard
      return <Redirect to={from} />;
    }
    return (
    <div className="container-fluid">
    <div className="row">
        <div className="col-xl-12">    
            <div className="login-page-block-inner">
                <div className="login-page-block-form">
                        <div className="form-actions">
                            <button type="button"  className="btn btn-primary width-150" onClick={(e) => { this.login()} }>Sign In</button>
                        </div>                       
                </div>
            </div>
        </div>
    </div>
</div>
    );
  }
}

score 2 · Answer 2 · answered Jun 27 '18 at 07:52

In React 16 and above you can use Redirect from 'react-router-dom'

import  { Redirect } from 'react-router-dom'

Define state in your component

this.state = {
  loginStatus:true
}

than in your render method

render () {
if(this.state.loginStatus){
    return <Redirect to='/home'  />
 }
return(
 <div> Please Login </div>
 )
}

Shubham Khatri · Answer 3 · 2017-05-26T11:28:13.390

1

Make use of withRouter frun react-router to inject router as a prop to your login component

import React, { Component } from 'react';
import {withRouter} from 'react-router'
import $ from 'jquery';

class Login extends Component {
constructor (props){
        super(props);
        this.state = {
            email : '',
            password : '',
            userId : ''
        };
    }

    login(){
      this.props.history.push('/dashboard');
    }
 render() {
    return (
    <div className="container-fluid">
    <div className="row">
        <div className="col-xl-12">    
            <div className="login-page-block-inner">
                <div className="login-page-block-form">
                        <div className="form-actions">
                            <button type="button"  className="btn btn-primary width-150" onClick={(e) => { this.login()} }>Sign In</button>
                        </div>                       
                </div>
            </div>
        </div>
    </div>
</div>
    );
  }
}
export default withRouter(Login)

edited May 26 '17 at 11:28

answered May 26 '17 at 10:42

Shubham Khatri

270,417
55
406
400

Thanks for your valuable time @Shubham. It's throws error like "Uncaught TypeError: Cannot read property 'push' of undefined" – Eswaran Arumugam May 26 '17 at 10:47
Did you import withRouter and use it also remove export default before creating Login component – Shubham Khatri May 26 '17 at 10:52
I have copied your answers and pasted it. But its not working. – Eswaran Arumugam May 26 '17 at 10:57
I updated the code to import withRouter from 'react-router' instead of 'react-router-dom' – Shubham Khatri May 26 '17 at 10:59
can you console.log(this.props) and see what you get – Shubham Khatri May 26 '17 at 11:12
this.props.history.push('/dashboard'). It's working for me. Thanks for your help. – Eswaran Arumugam May 26 '17 at 11:26
1

Yeah because it's custom history that you are using , history is the right prop – Shubham Khatri May 26 '17 at 11:27

Redirect doesn't redirect to components

3 Answers3