react课堂笔记十之路由react-router4.x

基本配置

    1、找到官方文档 https://reacttraining.com/react-router/web/example/basic

    2、安装  cnpm install react-router-dom --save

    3、找到项目的根组件引入react-router-dom

       import { BrowserRouter as Router, Route, Link } from "react-router-dom";

    4、复制官网文档根组件里面的内容进行修改  （加载的组件要提前引入）

         <Router>

                <Link to="/">首页</Link>

                <Link to="/news">新闻</Link>

                <Link to="/product">商品</Link>

               <Route exact path="/" component={Home} />
               <Route path="/news" component={News} />    
               <Route path="/product" component={Product} />   
         </Router>

         Route标签中配置exact表示严格匹配，不设置exact表示模糊匹配

动态路由传值

      1、动态路由配置

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

      2、对应的动态路由加载的组件里面获取传值

            this.props.match.params

      跳转：<Link to={`/content/${value.aid}`}>{value.title}</Link>

get传值

获取 this.props.location.search

可用url模块来解析url地址    在react里面使用url模块需要安装url模块    cnpm install url --save

    import url from 'url';

    componentDidMount(){

        // this.props.location.search

        //获取get传值

        console.log(url.parse(this.props.location.search,true));

        var query=url.parse(this.props.location.search,true).query;

        console.log(query)
    }