React-Router实战：路由传参（正则表达式）

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

一、准备工作

---

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(, 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 (
      
        

          
Home
          
About
          
News 
   


          
          
          
        
      
    );
  }
}

export default App;

./components/About/About.js

import React, { Component } from 'react';

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

                
About
               { this.props.match.params.name }
            
        );
    }
}

./components/New/New.js

import React, { Component } from 'react';

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

               
News
               { this.props.match.params.currentNew }
           
        );
    }
}

3、show

（1）初始页面

（2）点击About后，展示：

（3）点击News后，展示：

---

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

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

---

1、？ 参数可选

（1）使用

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

• /about
• /about/name

（2）将上面例子改为：

注：如果不加“？” ，则点对应 不传参数的NavLink，不会跳转到About界面

2、限定参数必须是数字

（1）使用

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

（2）将上面例子改为：

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

（1）使用

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