示例：

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 (
            <div className={'news'}>
                <div className={"ul-list"}>
                    <ul>
                        <li>
                            <NavLink to={'/news/list/2108'}>热门事件</NavLink>
                        </li>
                        <li>
                            <NavLink to={'/news/list/2310'}>军事新闻</NavLink>
                        </li>
                        <li>
                            <NavLink to={'/news/list/2421'}>体育新闻</NavLink>
                        </li>
                        <li>
                            <NavLink to={'/news/list/2509'}>时政新闻</NavLink>
                        </li>
                        <li>
                            <NavLink to={'/news/list/2637'}>游戏新闻</NavLink>
                        </li>
                        <li>
                            <NavLink to={'/news/list/2764'}>娱乐新闻</NavLink>
                        </li>
                    </ul>
                </div>
                <div className={'home-content'}>
                    {/* <h1>新闻内容区域</h1> */}
                    <Switch>
                        <Route path='/news/list/:id' component={ NewsDetail }></Route>
                    </Switch>
                </div>
            </div>
        )
    }
}

NewsDetail.jsx代码：

import React,{Component} from 'react';

export default class NewsDetail extends Component {
    render(){
        const { id } = this.props.match.params;
        return (
            <div className={'news-detail'}>
                <h1>新闻详情内容:{id} </h1>
            </div>
        )
    }
}

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 (
            <div className={'news'}>
                <div className={"ul-list"}>
                    <ul>
                        {/* 获取查询参数 */}
                        <li>
                            <NavLink to={'/home/list?id=1380'}>查询参数1</NavLink>
                        </li>
                        <li>
                            <NavLink to={'/home/list?id=1364'}>查询参数2</NavLink>
                        </li>
                        <li>
                            <NavLink to={'/home/list?id=1323'}>查询参数3</NavLink>
                        </li>
                    </ul>
                </div>
                <div className={'home-content'}>
                    <h1>首页内容区域</h1>
                    <Switch>
                        <Route path='/home/list/' component={ HomeDetail }></Route>
                    </Switch>
                </div>
            </div>
        )
    }
}

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 (
            <div className={'news-detail'}>
                <h1>首页详情内容:{id} </h1>
            </div>
        )
    }
}

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 (
     <Router>
       <div className={'router-style'}>
        {/* 导航部分 */}
        <div className={'nav-list'}>
          <div className={'nav'}>
            <NavLink to={'/home'}>首页</NavLink>
            <NavLink to={'/news'}>新闻</NavLink>
            <NavLink to={'/user'}>个人中心</NavLink>
            <NavLink to={'/link'}>联系我们</NavLink>
          </div>
        </div>
        <Layout>
            <Switch>
              <Route path={'/home'} component={Home}></Route>
              <Route path={'/news'} component={News}></Route>
              <Route path={'/user'} component={User}></Route>
              <Route path={'/link'} component={Link}></Route>
            </Switch>
        </Layout>


       </div>
     </Router>
   )
 }
}

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