@芥末的糖-----路由以及路由传参

React Router v4

React Router V4 遵循了 React 的理念：万物皆组件。不用于Vue里的Router-view嵌套

1.坑1

1.只需要引入react-router-dom

1.<BrowserRouter>：使用 HTML5 提供的 history API 来保持 UI 和 URL 的同步；
2.<HashRouter>：使用 URL 的 hash (例如：window.location.hash) 来保持 UI 和 URL 的同步；

import {BrowserRouter as Router}  from 'react-router-dom'

2.坑2Router下面只能有一个子组件

//需要一个Fragment来进行包裹等操作

<Router>
  <div>
    <Route exact path="/" component={Home}/>
    <Route path="/list" component={Me}/>
  </div>
</Router>

1.path（string）: 路由匹配路径。（没有path属性的Route 总是会 匹配）；
2.exact（bool）：为true时，则要求路径与location.pathname必须完全匹配，将我们的路由变成排查性路由；
3.strict（bool）：true的时候，有结尾斜线的路径只能匹配有斜线的location.pathname；

import { withRouter } from 'react-router-dom' 
//.......
export default withRouter(Onelist))

一.props.params

//定义路由
<Route path='/user/:name' component={Detail}></Route>
//跳转
  <div key={index} className="zimg" 
    onClick={_el => this.props.history.push( { pathname:'/detail/1', })}>
//接受
  this.props.match.params.name

二.query

//定义
<Route path="/detail" component={Detail} />
//跳转
<div key={index} className="zimg" 
  onClick={_el => this.props.history.push( 
    {pathname:'/detail',
     query:1,
  })}>
//接收
this.props.location.query

路由在线文档：https://reacttraining.com/react-router/web/guides/quick-start