重定向不会重定向到组件

Question

这是我的index.js 页面

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')
);

这是我的登录页面。但是点击按钮并不会重定向到对应的组件。

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>
    );
  }
}

Answer 1

在您的情况下，this.props.router 将是未定义的。这是我提出的一个粗略的解决方案。阅读代码中的 cmets 会有所帮助。

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>
    );
  }
}

Answer 2

在 React 16 及更高版本中，您可以使用 Redirect from 'react-router-dom'

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

在你的组件中定义状态

this.state = {
  loginStatus:true
}

比在你的渲染方法中

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

Answer 3

利用withRouter frun react-router 将路由器作为道具注入您的登录组件

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)