欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-04 10:45:32
...

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;
相关标签: 前端 react