react-router4.x 动态路由以及get传值

这个版本比较旧，在官方最新版本的文档里没找到对应的知识点，结论就是：还是用的旧的版本的写法。
App.js

import logo from './assets/images/logo.svg';
import './assets/css/index.css'
import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";
import Home from './components5/Home';
import News from './components5/News';
import Product from './components5/Product';
import Content from './components5/Content';
import ProductContent from './components5/ProductContent';

export default function App() {
  return (
    <Router>
      <div>
        <header className='title'>
          <Link to="/">Home</Link>
            
          <Link to="/news">News</Link>
          
          <Link to="/product">Product</Link>
        </header>

        <Route exact path='/' component={Home}/>
        <Route  path='/news' component={News}/>
        <Route  path='/product' component={Product}/>
        <Route  path='/content/:aid' component={Content}/>
        <Route  path='/productContent' component={ProductContent}/>
      </div>
    </Router>
  );
}


 

Home.js

import React, {Component} from 'react';

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return (  
            <div>
                这里是Home组件
            </div>
        );
    }
}
 
export default Home;

News.js

import React, {Component} from 'react';
import '../assets/css/index.css'
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
} from "react-router-dom";

class News extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list:[
                {
                    aid:1,
                    title:"新闻111",
                },
                {
                    aid:2,
                    title:"新闻222",
                },
                {
                    aid:3,
                    title:"新闻333",
                },
                {
                    aid:4,
                    title:"新闻444",
                }
            ]
          }
    }
    render() { 
        return (  
            <div>
                这里是News组件
                <ul className='list'>
                    {
                      this.state.list.map((value,key)=>{
                          return (
                            <li key={key}>
                                 <Link to={`/content/${value.aid}`}>{value.title}</Link>
                            </li>
                          )    
                      })
                    }
                </ul>
            </div>
        );
    }
}
 
export default News;

Content,js

import React, {Component} from 'react';

class Content extends Component {
    constructor(props) {
        super(props);
        this.state = {  
         
        }
    }
    //生命周期函数
    componentDidMount(){
        //获取动态路由的传值
        console.log(this.props.match.params.aid);
    }
    render() { 
        return (  
            <div>
                这里是Content组件
            </div>
        );
    }
}
 
export default Content;

Product.js

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

class Product extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            list:[
                {
                    aid:1,
                    title:"商品111",
                },
                {
                    aid:2,
                    title:"商品222",
                },
                {
                    aid:3,
                    title:"商品333",
                },
                {
                    aid:4,
                    title:"商品444",
                }
            ]
         }
    }
    render() { 
        return (  
            <div>
                这里是Product组件
                <ul className='list'>
                    {
                      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;

Product.js

import React, {Component} from 'react';
// url模块来解析url地址
import url from 'url';

class ProductContent extends Component {
    constructor(props) {
        super(props);
        this.state = {  
         
        }
    }
    //生命周期函数
    componentDidMount(){
       //获取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>
                这里是ProductContent组件
            </div>
        );
    }
}
 
export default ProductContent;