場景：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}`)//不帶statethis.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>

?

轉載于:https://www.cnblogs.com/wang715100018066/p/10514730.html

總結

以上是生活随笔為你收集整理的写在方法中的路由跳转的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。