react-route-dom 4.0 快速了解

路由创建

        HashRouter和BrowserRouter的使用

        (官网推荐的是BrowserRouter，但是此方式需要服务器配合,所以就使用HashRoute啦)

    引用方式如下：

    控件说明：

       使用<Switch>组件来包裹一组<Route>。<Switch>会遍历自身的子元素（即路由）并对第一个匹配当前路径的元素进行渲染。

        <Redirect>组件用于路由的跳转，即用户访问一个路由，会自动跳转到另一个路由。（重定向）

        属性说明：

        exact 使用exact只匹配‘/login’,像‘/login/user’都不会被匹配，不加就能匹配到。

        path通配符：

:paramName匹配URL的一个部分，直到遇到下一个/、?、#为止。()表示URL的这个部分是可选的。

 

路由跳转传值

    路由：

<Route path="/pcmanage/:identity/:status" component={StatusList}/>

    跳转方式：

    

    或

    

    获得的路径：

    /#/pcmanage/supply/1?xx#hash

    props获取到的值：

    

    值获取方式如下：

    this.props.location.state(传复杂不想在地址栏出现的参数)

    this.props.match.params.xx(传在地址栏可见的参数)

    注意：在跳转到的界面需要使用withRouter包装一下才能获取到值：

import { withRouter } from 'react-router-dom'

const DrawCircle = withRouter(CircleApp);