– 关注前端和node js,分享福利和心得!

react router基础用法

指南

  • 安装

    npm i react-router-dom -S
  • 引入路由模块

    import {BrowserRouter as Router,Route,,Link} from "react-router-dom"
  • 使用路由

    <Router>
    <Link to="/">首页</Link>
    <Link to="/list">List页面</Link>
    <Route path="/" exact component={Home} />//exact精确匹配
    <Route path="/list" component={List}/>
    </Router>

    路由传参

  • 动态路由传参(/detail/:id)

1、在Route的path中配置动态参数

<Route path="/detail/:id"/>

2、在Link的to属性中指定id

<Link to="/detail/1">跳转到详情</Link>

3、在详情组件中获取动态参数

this.props.match.params.id  //1
  • get形式传参 1、在Link的to属性中增加get参数
    <Link to="/detail?id=1">详情</Link>
    2、在详情页获取get参数
    this.props.location.search  //结果为?id=1,需要自己解析出来
  • 通过query传参
    //link形式
    <Link to={{pathname"/detail",query:{id:1}}}>query传参</Link>
    //js形式
    this.props.history.push({
    pathname:'/detail',
    query:{
        id:1
    }
    })
    //获取参数
    this.props.location.query.id

query是隐式传参,在url上看不到参数,而且刷新页面后,query参数会消失

  • 通过state传参
    //Link形式
    <Link to={{pathname:'/detail',state:{id:1}}}>state传参</Link>
    //js形式
    this.props.history.push({
    pathname:'/detail',
    state:{
        id:1
    }
    })
    //获取参数
    this.props.location.state.id

state也是隐式传参

最新文章

    热门文章