寫在方法中的路由跳轉

場景：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>