写在方法中的路由跳转

忘是亡心i 2021-12-17 09:27 342阅读 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 条评论，342人围观）

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

相关阅读

相关路由跳转的方式

router-view 实现路由内容的地方，引入组件时写到需要引入的地方需要注意的是，使用vue-router控制路由则必须router-view作为容器。 ...

红太狼/ 2024年04月19日 12:10/ 0 赞/ 182 阅读

相关 Vue 路由跳转

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

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

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

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

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

相关 vue中的路由跳转方法，详细（vue路由跳转）

简述：Vue路由可以帮助你在单页应用中管理应用的不同页面和页面间的跳转，通过Vue路由，你可以实现页面的动态切换和无刷新加载，提升用户体验和页面性能，今天就来分享下Vue中路

痛定思痛。/ 2023年10月02日 23:42/ 0 赞/ 132 阅读

相关 Vue 路由及路由跳转

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

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

相关 vue中的路由跳转

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

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

相关【Vue】路由跳转

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

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

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

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

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

相关【Vue】路由跳转

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

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

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

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

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