写在方法中的路由跳转

场景：login页面点击登陆按钮，登陆成功后，进入home页面；（当然，这里就不能用Link跳转了）

问题：history的报错；

解决：需要引入react-router-dom中的withRouter

import {withRouter} from 'react-router-dom';

 

然后在暴露出组件的时候，用withRouter给包裹起来~像这样：

class Home extends Component {

}
export default withRouter(Home) //重点

最后，在你需要跳转的login页面：

//注意：HashRouter不支持state。。。BrowserRouter才支持state,但是BrowserRouter本身需要后端做相应的配置
     this.props.history.push( `/expert-detail/${LecturerID}`)//不带state

    this.props.history.push({pathname: `/expert-detail/${LecturerID}`,state:data})//带有state

 

总结：

withRouter解决了方法中路由跳转的问题，解决了history报错
了解了HashRouter与BrowserRouter的异同，这里我选用了BrowserRouter来配置路由。
分享：

import { BrowserRouter as Router,Route, Switch, Redirect } from 'react-router-dom'

　　　　<Router>
        <Switch>
          <Route exact path="/"
            render={ () => {
                if(loginSuccess){ //判断是否已经登陆
                  return <Redirect to="/home" />
                }else{
                  return <Redirect to = "/login" />
                }
              }
            }
          />
          <Route exact path="/login" component={ Login } />
          <Home>
            { CHILD_ROUTES.map(item => {
              return <Route key={ item.id } path={ item.path } component={ item.main } />
            }) }
          </Home>
        </Switch>
      </Router>