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