React-router4 第二篇url-params url参数

官方文档

以下代码均来自于官方文档

上来一步走

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

下一步复制代码

const ParamsExample = () => (
  <Router>   // 在<Router>组件中，可以任意的写标签写布局，很嚣张。。
    <div>
      <h2>Accounts</h2>
      <ul>
        <li><Link to="/netflix">Netflix</Link></li>  // 同样，写了布局，又写了a标签
        <li><Link to="/zillow-group">Zillow Group</Link></li>
        <li><Link to="/yahoo">Yahoo</Link></li>
        <li><Link to="/modus-create">Modus Create</Link></li>
      </ul>

      <Route path="/:id" component={Child}/>  // 定义路由，现在想来，这是用地址栏传参啊
      // path里面的值是<Link>组件中的to的值，，，这个写法有些奇怪，/:id
      // 原来由路由渲染的组件都会自动的往组件中传递一个参数，这个参数包含了路由信息
      // 而:id 是一种官方规定的写法，阮一峰老师的文章里是说 这是通配符，，
      // http://www.ruanyifeng.com/blog/2016/05/react_router.html?utm_source=tool.lu

    </div>
  </Router>
)
//
// 这里的 { match } 相当于 parameter.match  不懂的话看ES6就懂了
const Child = ({ match }) => (
  <div>
    <h3>ID: {match.params.id}</h3>
  </div>
)
比如我我打印出来数据，完全把地址栏的信息打印出来了，很是方便
{
    isExact: true,
    params: Object,
    path: "/...",
    url: "/..."
}
export default ParamsExample