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

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

上来一步走

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

下一步复制代码

const ParamsExample = () => (
     // 在组件中，可以任意的写标签写布局，很嚣张。。
    

      
Accounts
      

        
Netflix
  // 同样，写了布局，又写了a标签
        
Zillow Group
        
Yahoo
        
Modus Create
      

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

    
  
)
// 
// 这里的 { match } 相当于 parameter.match  不懂的话看ES6就懂了 
const Child = ({ match }) => (
  

    
ID: {match.params.id}
  
)
比如我我打印出来数据，完全把地址栏的信息打印出来了，很是方便
{
    isExact: true,
    params: Object,
    path: "/...",
    url: "/..."
}
export default ParamsExample

转载于:https://www.cnblogs.com/daowangzhizhu-pt/p/6652866.html