示例：

1、新聞頁使用動(dòng)態(tài)傳參

動(dòng)態(tài)傳參，在匹配路由中使用Switch去匹配路由的同時(shí)，path路徑后面跟上:id稳衬，公共組件使用const { id } = this.props.match.params;去獲取到動(dòng)態(tài)的參數(shù)，通過拿到這個(gè)動(dòng)態(tài)的參數(shù)坐漏，就可以返回后臺薄疚，然后顯示對應(yīng)的數(shù)據(jù)內(nèi)容，前端就只需要在公共組件中根據(jù)后臺傳過來的不同數(shù)據(jù)去渲染就可以了赊琳。
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'}>時(shí)政新聞</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>新聞內(nèi)容區(qū)域</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>新聞詳情內(nèi)容:{id} </h1>
            </div>
        )
    }
}

2街夭、首頁使用查詢參數(shù)

查詢參數(shù)是在location中的search中的內(nèi)容，類似get請求的?id=123這種躏筏，查詢參數(shù)一般可以使用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>
                        {/* 獲取查詢參數(shù) */}
                        <li>
                            <NavLink to={'/home/list?id=1380'}>查詢參數(shù)1</NavLink>
                        </li>
                        <li>
                            <NavLink to={'/home/list?id=1364'}>查詢參數(shù)2</NavLink>
                        </li>
                        <li>
                            <NavLink to={'/home/list?id=1323'}>查詢參數(shù)3</NavLink>
                        </li>
                    </ul>
                </div>
                <div className={'home-content'}>
                    <h1>首頁內(nèi)容區(qū)域</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>首頁詳情內(nèi)容:{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'}>
        {/* 導(dǎo)航部分 */}
        <div className={'nav-list'}>
          <div className={'nav'}>
            <NavLink to={'/home'}>首頁</NavLink>
            <NavLink to={'/news'}>新聞</NavLink>
            <NavLink to={'/user'}>個(gè)人中心</NavLink>
            <NavLink to={'/link'}>聯(lián)系我們</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;
}

查詢參數(shù)效果展示.png

動(dòng)態(tài)傳參.png