写在方法中的路由跳转

忘是亡心i 2021-12-17 09:27 269阅读 0赞

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

转载于:https://www.cnblogs.com/wang715100018066/p/10514730.html

发表评论取消回复

表情：

评论列表（有 0 条评论，269人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue 路由跳转

文章目录前言路由基础子路由路由传参 query 传参 path 静态传参动态传参

我就是我/ 2023年10月13日 10:39/ 0 赞/ 22 阅读

相关 vue router实现路由跳转方法

![08e886e37a144a44b1d7d7c26d0864ff.jpeg][] 今天在学习 vue的过程中，看到了 vue的 router，用它来实现路由跳转，非常方便

雨点打透心脏的1/2处/ 2023年10月11日 23:04/ 0 赞/ 2 阅读

相关 Vue 路由及路由跳转

让根组件自动的挂载其它组件，而不是手动挂载。 1. 安装： > cnpm install vue-router --save 1. 在main.js中引入并使用v

朴灿烈づ我的快乐病毒、/ 2022年12月22日 14:29/ 0 赞/ 275 阅读

相关 vue中的路由跳转

https://blog.csdn.net/weixin\_42981560/article/details/94378469 ![在这里插入图片描述][watermark

绝地灬酷狼/ 2022年09月15日 11:45/ 0 赞/ 251 阅读

相关跳转在路由中监控添加横杠

var app = angular.module("xxj", \["ngRoute", "mobile-angular-ui", 'ui.bootstrap', "xxSer

素颜马尾好姑娘i/ 2022年06月02日 08:24/ 0 赞/ 182 阅读

相关在antd的标签组件中做路由跳转

使用react-router-dom在组件中可以很方便的使用 Link 标签进行路由跳转。但是我碰到了这样的情况 ![watermark_type_ZmFuZ3poZW5na

傷城~/ 2022年04月16日 06:19/ 0 赞/ 1000 阅读

相关【Vue】路由跳转

[【Vue】路由跳转][Vue] 路由跳转有几种方式，我用的最多的是$router.push的方法：实践：例如下面的页面，要求点详情跳转到详情页。 ![在这里

悠悠/ 2021年12月17日 18:30/ 0 赞/ 504 阅读

相关写在方法中的路由跳转

场景：login页面点击登陆按钮，登陆成功后，进入home页面；（当然，这里就不能用Link跳转了）问题：history的报错；解决：需要引入react-router-

忘是亡心i/ 2021年12月17日 09:27/ 0 赞/ 270 阅读

相关【Vue】路由跳转

路由跳转有几种方式，我用的最多的是$router.push的方法：实践：例如下面的页面，要求点详情跳转到详情页。 ![在这里插入图片描述][watermark_

清疚/ 2021年12月15日 06:55/ 0 赞/ 482 阅读

相关在el-menu 中增加路由跳转

参考官方文档： ![在这里插入图片描述][20210208143837204.png] 有以下两种方式 ![在这里插入图片描述][20210208143854790

短命女/ 2021年07月26日 01:57/ 0 赞/ 353 阅读