react-route-dom 4+

路由创建

        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);

猜你喜欢

转载自blog.csdn.net/dk123sw/article/details/80228450
今日推荐