首先我们先做个路由普通传参的例子。

一、准备工作

1、目录结构

| - index.js
| - components
	| - App      =>   App.js
	| - Home     =>   Home.js
	| - About    =>   About.js
	| - News      =>   News.js

2、源码

./index.js

import React from react;
import ReactDOM from react-dom;
import App from ./components/App/App;
ReactDOM.render(<App />, document.getElementById(root));

./components/App/App.js

import React , { Component } from react;
import { BrowserRouter as Router, Route, NavLink } from react-router-dom;
import Home from ../Home/Home;
import About from ../About/About;
import News from ../News/News;

let name = bty,
    currentNew = Today is good!;

class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <li><NavLink to="/">Home</NavLink></li>
          <li><NavLink to={`/about/${name}`}>About</NavLink></li>
          <li><NavLink to={`/news/${currentNew}`}>News</NavLink> </li>   <br/>

          <Route path="/" exact component={Home} />
          <Route path="/about/:name" component={About} />
          <Route path="/news/:currentNew" component={News} />
        </div>
      </Router>
    );
  }
}

export default App;

./components/About/About.js

import React, { Component } from react;

export default class About extends Component {
    render() {
        return (
            <div>
                <h2>About</h2>
               { this.props.match.params.name }
            </div>
        );
    }
}

./components/New/New.js

import React, { Component } from react;

export default class News extends Component {
    render() {
        return (
           <div>
               <h2>News</h2>
               { this.props.match.params.currentNew }
           </div>
        );
    }
}

3、show

（1）初始页面 （2）点击About后，展示： （3）点击News后，展示：

二、路由传参 - 正则表达式

由于应用很灵活，这里就列举几种使用情况

1、？ 参数可选

（1）使用

<Route path="/about/:name?" component={About} />

以下两种情况都符合跳转条件：

/about /about/name

（2）将上面例子改为： 注：如果不加“？” ，则点对应 不传参数的NavLink，不会跳转到About界面

2、限定参数必须是数字

（1）使用

<Route path="/about/:name(d+)"  component={About}  />

匹配的路由： /about/10083 不匹配的路由： /about/bty

（2）将上面例子改为：

3、限定参数必须是3位数字

（1）使用

<Route path="/about/:name(d{3})"  component={About}  />

匹配的路由： /about/100 不匹配的路由： /about/10083 不匹配的路由： /about/bty