Three ways of using JS to control route jump in react-router 4.2

1、 Background

• In many cases, we need to use js to control the routing switch of the page, rather than through the link tag. For example, there is a scene where users have to log in to a website to see the content inside the website. The login interface is an independent sub page. After successful login, they can enter the website to browse the relevant content. When using react to do spa, they need to do the routing switch Change.

2、 React-router 4.2

• You can see the usage of react router everywhere on the Internet. You can jump by linking and binding components, or you want to use react router in subcomponents after binding hashhistorythis.props.history . push ('/ a path')It’s true that the implementation of routing jump is feasible in previous versions. It’s said that I haven’t used it anyway. The 4.2 version of Qihua does not support this method. I’ve been watching for a long time on the Internet and tried many ways, but I still can’t achieve JS control routing switch through the above way, emmm

3、 Problem solving

Use the redirect tag in 4.2? Components? I don't know what to call it
The details are as follows:
Define the route (table) first:

import {
  BrowserRouter as Router,
  Route,
  Switch
} from 'react-router-dom';
 <Router >
      <div style={{height:'100%'}}>
      <Switch>
        <Route exact path="/" component={LoginPage}/>
        <Route path="/chat" component={Chat}/>
        <Route path="/home" component={Home}/>
        <Route path="/login" component={Login}/>
      </Switch>
      </div>
    </Router>)

Method 1: use it in the subcomponent
First, we need to introduce redirect

import { Redirect } from 'react-router';

 class Login extends React.Component {
    
    render() {
    const {isRegisterNewUser,loginSuccess}=this.props;
    const { getFieldDecorator} = this.props.form;
    if(loginSuccess){
      *return (<Redirect to="/chat" />);*
    }else{
     return(
     There are various forms before login
     )
    } 
    
  }
}

Method 2: from the following big guys:Jingdui 94
import PropTypes from ‘prop-types’;

static contextTypes = {

    router: PropTypes.object.isRequired,
}

console.log(this.context.router)

For example:

class Login extends React.Component {
        static contextTypes = {
            router: PropTypes.object.isRequired,
        }
        render() {
        const {isRegisterNewUser,loginSuccess}=this.props;
        const { getFieldDecorator} = this.props.form;
        If (loginsuccess) {// the login status changes to successful
          this.context.router.history.push('/chat)
        }else{
         return(
         There are various forms before login
         )
        } 
        
      }
    }

Method 3: fromInori_LoverRecommended by the bossOfficial document:Using withrouter to solve

import {withRouter } from 'react-router';
class Login extends React.Component {
            static contextTypes = {
                router: PropTypes.object.isRequired,
            }
            render() {
            const {isRegisterNewUser,loginSuccess，history}=this.props;
            const { getFieldDecorator} = this.props.form;
            If (loginsuccess) {// the login status changes to successful
              this.props.history.push('/chat)
            }else{
             return(
             There are various forms before login
             )
            } 
            
          }
        }
        ...
        
const Login=withRouter(connect(mapStateToProps,mapDispatchToProps)(TLogin))
export default Login;

If you don’t use ReduxThen the correct posture for you to use withrouter should be

const Login=withRouter(TLogin)
export default Login;

4、 The key points are:

Thank you for your advice. I’m too impetuous to read the document carefully. I’ll read more in the future. No matter what way, the most important thing is to solve the problem.

Reference connection:stackoverflow