react-router-dom示例讲解（二）——url路径参数

react-router-dom的官方教程中，第二个示例是路径参数，是一个比较简单的示例。这个示例给了我们一个如何匹配路径参数的示例或者方法。

本示例实现的效果如下：

在路由设计中，我是这样实现的：

import React, { Component } from 'react';
import {
    BrowserRouter as Router,
    Route,
    Link
} from 'react-router-dom';

import Child from './child/Child'

import '../styles/App.css';

class App extends Component {
  render() {
    return (
        <Router>
            <div>
                <h2>账号</h2>
                <ul>
                    <li><Link to="/react-router">React Router</Link></li>
                    <li><Link to="/leoashin">LeoAshin</Link></li>
                    <li><Link to="/justjavac">justjavac</Link></li>
                    <li><Link to="/reacttraining">React Training</Link></li>
                </ul>
                <hr/>
                <Route path="/:id" component={Child}/>
            </div>
        </Router>
    );
  }
}

export default App;

这样的路由设置中，多个Link组件对应一个组件——Child组件。

匹配的参数是通过 path=’/:id’ 的方式来实现的。

在子页面是这样获取的：var id = this.props.match.params.id;

//子组件Child.js
import React,{ Component} from 'react';

export default class Home extends Component{
    render(){
        return (
            <div>
                <h1>{this.props.match.params.id}</h1>
            </div>
        )
    }
}

如果还有没明白的请自行参考我的github地址：
https://github.com/liwudi/react-router-dom2.git

下一篇：react-router-dom示例讲解（三）——认证功能