美文网首页React.js
react-router4.0+路由传参方式,指定需要的参数或者

react-router4.0+路由传参方式,指定需要的参数或者

作者: 寒小跳 | 来源:发表于2019-06-29 11:41 被阅读0次

先看页面效果

在这里插入图片描述

以下是完整代码

import React, { Component } from 'react'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'

class UrlParams extends Component {
  render() {
    return (
      <Router>
        <Link to="/one">One</Link><br/>
        <Link to="/two">Two</Link><br/>
        <Link to="/three">Three</Link><br/>
        <Link to="/test/testone">test/aaa</Link><br/>

        {/* Route 并不是只会显示一个,它会按照出现顺序匹配,若当前url都符合path则可以都匹配成功 */}
        <Route path="/:id" component={Child}></Route>
        {/* 下面这个Route 只会在 path路径为 /test/testone 或者 /test/testtwo 两种情况下匹配成功 */}
        <Route path="/test/:fortest(testone|testtwo)" component={WithRegex}></Route>

        {/* 不支持这样的正则匹配 */}
        {/* <Route path={`/test/:fortest(${/^test[\w+]/g})`} component={WithRegex}></Route> */}

      </Router>
    )
  }
}

class Child extends Component {
  render() {
    return (
      <div>
        <h2>params参数 id: {this.props.match.params.id}</h2>
      </div>
    )
  }
}

class WithRegex extends Component {
  render() {
    return (
      <div>
        <h2>这是通过指定规定的路径显示出的组件</h2>
        <h3>params参数 fortest: {this.props.match.params.fortest}</h3>
      </div>
    )
  }
}

export default UrlParams

<Route path="/:id" component={Child}></Route>
这个path通过这样表示通过传递一个id来匹配动态的路径,其中id是自己定义的,会作
为params对象里面的一个属性,匹配根路径"/",之后的第一个url片段作为id的属性值。
这个<Route/>会匹配到根路径后面不为空的所有URL

<Route path="/test/:fortest(testone|testtwo)" component={WithRegex}></Route>
通过()来限制可以匹配的路径参数,或者说是枚举出哪些路径可以匹配,
这个写法表示只有在路径为"/test/testone"或者"/test/testtwo"才匹配成功,fortest会作为params的属性,它的值就是匹配到的URL的第二个片段,"testone"或者"testtwo"
尝试了一下,想通过正则表达式来限制匹配路径

{/* 不支持这样的正则匹配 */}
{/* <Route path={`/test/:fortest(${/^test[\w+]/g})`} component={WithRegex}></Route> */}

不过还有另一个思路:前面的path可以设置为匹配所有的路径,然后将component换成用render渲染,其中的渲染条件则可以根据正则表达式来进行对应组件的渲染。这样就可以实现类似正则表达式匹配不同路径。

相关文章

  • react-router4.0+路由传参方式,指定需要的参数或者

    先看页面效果 以下是完整代码

  • 开发之路十五——vue开发笔记

    ps:好记性不如烂笔头,记录开发vue过程中的点滴 1、路由传参(3种方式) params传参(显示参数)需要路由...

  • Vue-Router

    1. 路由配置 默认路由跳转 在 new Router时可用的配置参数: 2.路由传参 Vue路由传参的几种方式 ...

  • 几种vue的组件传值方式

    几种vue的组件传值方式 1、路由传参 ①定义路由时加上参数props: true,在定义路由路径时要留有参数占位...

  • Next.js 跳转传参并接收接参

    介绍路由传参,接参使用方法 传参 + 跳转页面接收参数 动态路由传参 + 跳转页面接收参数创建动态路由在pag...

  • 微信小程序路由传参

    路由传参常用方式有以下几种 1. 通过url传参 上面的方式的参数不能是对象,如果需要传对象,可以将对象转成jso...

  • vue - 路由带参跳转

    vue路由传参按照传参方式可划分为params传参和query传参; params传参分为在url中显示和影藏参数...

  • vue中组件3种编程式路由跳转传参

    路由传参 1、路由配置传参(刷新页面不会丢失参数,url会携带参数) A组件跳转B组件传参A组件 路由配置 B组件...

  • Flutter 路由传参小结

    Flutter路由传参总体来说有两种方式,一种是通过构造函数传参,一种是通过路由参数传参。这两种方式都可以使用自定...

  • VUE路由传参

    1.param方式传参 使用路由时把参数写到路由地址后面发送:image.png 路由配置中接受参数image.p...

网友评论

    本文标题:react-router4.0+路由传参方式,指定需要的参数或者

    本文链接:https://www.haomeiwen.com/subject/khzucctx.html