react如何获取路由，以及如何进行路由跳转并传参，以及接收

最新推荐文章于 2025-06-20 17:19:33 发布

原创最新推荐文章于 2025-06-20 17:19:33 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react

前端专栏收录该内容

3 篇文章

订阅专栏

这篇博客介绍了在React中如何使用`this.props.location.pathname`获取当前路由，使用`this.props.history.push()`进行路由跳转，以及如何传递和接收路由参数。通过示例展示了动态路由`/full:type:phoneno`和`/gen_main:id`等的用法，以及参数封装和解构的方法。此外，还给出了一个包含多个组件路由的`<Router>`配置示例。

1.获取路由 this.props.location.pathname
2.进行路由跳转 this.props.history.push({pathname :"/meet"})
3.获取动态路由参数 this.props.match.params.users

路由传参 this.props.history.push({pathname :"/device/list",query:{data:item})

接收路由传过去的参数 const {data}=this.props.location.query;、

具体实现router.js定义

 <Router>
            <Route exact path="/" component={Login} />
            <Route path="/register" component={Register} />
            <Route path="/forget" component={Forget} />
            <Route path="/full:type:phoneno" component={Full} />
            <Route path="/gen_main:id" component={Gen_Main} />
            <Route path="/service:id" component={Service} />
            <Route path="/adn_main:id" component={Adn_Main} />
            <Route path="/adn_list:id" component={Adn_List} />
            <Route path="/order_info:id" component={OrderInfo} />
            <Route path="/order_detil" component={OrderDetil} />
            <Route path="/cate_rule" component={CateRule} />
            <Route path="/grade_shop:id" component={GradeShop} />
            <Route path="/heart_act:id" component={HeartAct} />
            <Route path="/all_shop:id" component={AllShop} />
            <Route path="/new_shop:id" component={NewShop} />
            <Route path="/cen_shop:id" component={CenShop} />
            <Route path="/user_info:id" component={UserInfo} />
        </Router>

跳转

 if(parseInt(calb.type) === 1){
          this.props.history.push('/gen_main'+id);
        }else{
          this.props.history.push('/adn_main'+id);
        }
       /*也可以将参数封装到一个data里面*/

获取参数

 const userid = this.props.match.params.id;