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、复制官网文档根组件里面的内容进行修改  （加载的组件要提前引入）

         

                首页

                新闻

                商品

               
                   
                  
         

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

动态路由传值

      1、动态路由配置

            

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

            this.props.match.params

      跳转：{value.title}

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)
    }