示例：

1、新闻页使用动态传参

动态传参，在匹配路由中使用Switch去匹配路由的同时，path路径后面跟上:id，公共组件使用const { id } = this.props.match.params;去获取到动态的参数，通过拿到这个动态的参数，就可以返回后台，然后显示对应的数据内容，前端就只需要在公共组件中根据后台传过来的不同数据去渲染就可以了。
News.jsx代码：

import React,{Component} from 'react';

import {
    NavLink,
    Route,
    BrowserRouter as Router,
    Switch
} from 'react-router-dom'

import NewsDetail from './NewsDetail'

export default class News extends Component {
    render(){
        return (
            

                

                    


                            热门事件

                        

                            军事新闻

                        

                            体育新闻

                        

                            时政新闻

                        

                            游戏新闻

                        

                            娱乐新闻

                    

                

                    {/* 
新闻内容区域
 */}
                    

            
        )
    }
}

NewsDetail.jsx代码：

import React,{Component} from 'react';

export default class NewsDetail extends Component {
    render(){
        const { id } = this.props.match.params;
        return (
            

                
新闻详情内容:{id} 
            
        )
    }
}

2、首页使用查询参数

查询参数是在location中的search中的内容，类似get请求的?id=123这种，查询参数一般可以使用node框架自带的Url模块中的parse方法去解析id的值，这样使用更加的高效。
Home.jsx代码：

import React,{Component} from 'react';

import {
    NavLink,
    Route,
    BrowserRouter as Router,
    Switch
} from 'react-router-dom'

import HomeDetail from './HomeDetail'

export default class Home extends Component {
    render(){
        return (
            

                

                    

                        {/* 获取查询参数 */}
                        

                            查询参数1

                        

                            查询参数2

                        

                            查询参数3

                    

                

                    
首页内容区域
                    

            
        )
    }
}

HomeDetail.jsx代码：

import React,{Component} from 'react';

const Url = require('url')

export default class HomeDetail extends Component {
    render(){
        const data = this.props.location.search;
        const { id } = Url.parse(data,true).query;
        console.log(this.props);
        return (
            

                
首页详情内容:{id} 
            
        )
    }
}

3、App.js文件代码

import React, { Component } from 'react';

import {
    NavLink,
    Route,
    BrowserRouter as Router,
    Switch
} from 'react-router-dom'

import Layout from "./components/Layout"
import Home from "./components/Home"
import User from "./components/User"
import News from "./components/News"
import Link from "./components/Link"

import './components/page.css';

class App extends Component {
 render(){
   return (
     

        {/* 导航部分 */}
        

          

            首页新闻个人中心联系我们

        
        

     
   )
 }
}

export default App;

4、page.css样式代码

* {
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;

}

body {
    overflow: hidden;
}

.router-style {
    width: 100vw;
    height: 100vh;
}

.nav-list {
    width: 100%;
    height: 5vh;
    float: right;
    border-bottom: 2px solid #eee;
}

.nav-list .nav {
    width: 40vw;
    height: 100%;
    display: flex;
    float: right;
    justify-content: space-around;
    align-items: center;
}

.layout {
    width: 100%;
    height: calc( 100% - 5vh);
    display: flex;
}

.news {
    width: 100%;
    height: 100%;
    display: flex;
}

.ul-list {
    width: 8vw;
    height: 100%;
    border-right: 1px solid #eee;
}

.ul-list ul {
    display: flex;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
}

.ul-list ul li {
    width: 100%;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border-bottom: 1px solid #eee;
}

.home-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

查询参数效果展示.png

动态传参.png