【React】react路由的配置

1、找到官方文档 https://reacttraining.com/react-router/web/guides/quick-start

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>

exact表示严格匹配

 

动态路由

1、定义传值数据

constructor(props) {
        super(props);
        this.state = { 

            list:[

                {
                    aid:'11',
                    title:'我是商品1111'
                },
                {
                    aid:'222',
                    title:'我是商品222'
                },
                {
                    aid:'3',
                    title:'我是商品333'
                },
                {
                    aid:'4',
                    title:'我是商品4444'
                }
            ]
         };
    }

2、绑定路由传值

render() {
        return (
            
            <div>

                我是商品组件

                 <ul>
                    {

                        this.state.list.map((value,key)=>{

                            return (
                                <li key={key}>                                   
                                    <Link to={`/productcontent?aid=${value.aid}`}>{value.title}</Link>
                                </li>
                            )
                        })
                    }
                    
                </ul>
            </div>
        );
    }

3、获取路由上的数据

//生命周期函数
    componentDidMount(){


        //获取动态路由的传值
        console.log(this.props.match.params.aid);  

  }