zoukankan      html  css  js  c++  java
  • React-Router 4 两个常用路由变量

    讲真我个人不太喜欢4.x版本,虽然作者自信动态路由的形式符合React组件化的哲学,但是路由和一般组件耦合太深,而且后期组件分片也麻烦,以后需要重构的话怕是会一番折腾。同学公司用的还是3.x版本。

    不过今天做项目发现npm上搜索结果已经没有3.x了,只有4.x和2x版本,似乎暗示着未来的趋势?反正项目不算复杂,这次先用4.2.

    4.x版的动态路由主要是用Link跳转url,Route渲染组件。

    当我们用Route渲染组件的时候(component={CompName}),react-router会自动给被渲染的组件的props中添加两个变量,一个是location。一个是match。

    当我们通过render/children函数渲染jsx的时候(render={(match)=>(JSX)}),将之作为参数即可。

    locaton:表示此时页面在app应用中的位置(也就是此时的url),文档告诉我们这个变量大概是这样子:

    1 {
    2   key: 'ac3df4', // not with HashHistory!
    3   pathname: '/somewhere'
    4   search: '?some=search-string',
    5   hash: '#howdy',
    6   state: {
    7     [userDefined]: true
    8   }
    9 }
    View Code

    如果组件预期是通过Route渲染,我们可以在定义组件的代码中 使用location变量提供的这些信息。

    match:存储有当前  url和渲染该组件的<Route path>  匹配信息的对象变量:

    有params,isExact,path,url四个属性。

    注意params是动态路由参数,如:

    1 //pid即为动态路由参数
    2 <Route path="/product/:pid/detail" component={Product}>
    3 //在Product组件中,this.props.match.params.pid即可获取该段的参数

    一段时间没使用又忘了,还以为是查询字符参数呢

  • 相关阅读:
    springmvc与servlet初识理解2
    springMVC与servlet的初识
    SpringMVC的依赖和视图解析器配置
    【内网渗透】— 内网信息收集(4)
    机械行业设计软件学习资源整理
    整理的电学课程
    redis src 目录组织结构
    解决Joi报错TypeError: Joi.Validate is not a function问题
    浅谈Node.js开发Web服务器
    JavaScript水仙花数(传递任意n位数)
  • 原文地址:https://www.cnblogs.com/alan2kat/p/7719208.html
Copyright © 2011-2022 走看看