react router4 js控制跳转

react 16.2.0;react-router 4.2.0;react-router-dom 4.2.2

本示例演示从开始时显示Test1组件，过两秒后跳转到Test2，再过两秒跳回Test1。很简单，直接看代码

关键点：相对react-router之前版本，react-router4通过withRouter获取history

import React from 'react';

import ReactDOM from 'react-dom';

import { HashRouter, Switch, Route, Redirect, withRouter } from 'react-router-dom';

//测试组件1

class Test1 extends React. Component {

constructor( props) {

super( props)

}

render() {

return ( < div >

这里是Test1 , 111

</ div >)

}

componentDidMount(){

setTimeout(() =>{

this. props. history. push( '/test2');

}, 2000)

}

}

withRouter( Test1)

//测试组件2

class Test2 extends React. Component {

constructor( props) {

super( props)

}

render() {

return ( < div >

这里是Test2 , 222

</ div >)

}

componentDidMount(){

setTimeout(() =>{

this. props. history. push( '/test1');

}, 2000)

}

}

withRouter( Test2)

//路由器

let router =

< HashRouter >

< div >

< Switch >

< Route exact path= "/test1" component= { Test1 } />

< Route exact path= "/test2" component= { Test2 } />

< Route path= "/" render= {() => {

return < Redirect to= "/test1" />

} } />

</ Switch >

</ div >

</ HashRouter >

//渲染

ReactDOM. render( router, document. getElementById( 'root'));