Reactjs之靜態路由、動態路由以及Get傳值以及獲取

1、新增知識點

/*
  react路由的配置：
    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>
         exact表示嚴格匹配
react動態路由傳值
      1、動態路由配置
          <Route path="/content/:aid" component={Content} />   
      2、對應的動態路由加載的組件里面獲取傳值
            this.props.match.params
      跳轉：<Link to={`/content/${value.aid}`}>{value.title}</Link>
react get傳值  
      1、獲取 this.props.location.search       
*/

2、案例實現路由配置

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import './assets/css/index.css'
import Home from './components/Home';
import News from './components/News';
import Product from './components/Product';
class App extends Component {
  render() {
    return (
        <Router>
          <div>           
              <header className="title">
                <Link to="/">首頁</Link>
                <Link to="/news">新聞</Link>
                <Link to="/product">商品</Link>
              </header>
               <br />
               <hr />
               <br />
              <Route exact path="/" component={Home} />
              <Route path="/news" component={News} />    
              <Route path="/product" component={Product} />                 
          </div>
      </Router>
    );
  }
}
export default App;

3、動態路由以及獲取傳值案例

import React, { Component } from 'react';
import { Link } from "react-router-dom";
class Product extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            list:[

                {
                    aid:'11',
                    title:'我是商品1111'
                },
                {
                    aid:'222',
                    title:'我是商品222'
                },
                {
                    aid:'3',
                    title:'我是商品333'
                },
                {
                    aid:'4',
                    title:'我是商品4444'
                }
            ]
         };
    }
     //生命周期函數
    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)
    }
    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>
        );
    }
}
export default Product;