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

一、准备工作

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