react动态路由传值

react动态路由传值
react-router-dom在浏览器中使用
react-router-native在开发手机原生应用中使用
--推荐使用react-navigation
下载npm i react-router-dom
引入对象:按需引入 HashRouter,BrowserRouter,Route
HashRouter是框架的坑
browserRouter是路由的坑
Route代表锚点和填入的位置
Switch选择一个(被其包裹的Router冲上到下,只会匹配一个)
exact(精准匹配锚点)
1、动态路由配置

      <Route path="/content/:aid" component={Content} />   

  2、对应的动态路由加载的组件里面获取传值
        this.props.match.params.aid
  跳转:<Link to={`/content/${value.aid}`}>{value.title}</Link>

    react get传值  

    一步即可
   //url模块来解析url地址    在react里面使用url模块需要安装url模块    cnpm install url --save
      import url from 'url';
       var query=url.parse(this.props.location.search,true).query;
     console.log(query)
  1、获取 this.props.location.search
posted @ 2020-10-29 18:13  做个人把  阅读(375)  评论(0)    收藏  举报