We can use regular expressions to more precisely define the paths to our routes in React Router v4.

To add regex for router, we only need to add (), inside (), we can write regex:

                <Route
path="/:date(\d{2}-\d{2}-\d{4}):ext(.[a-z]+)"
children={({match}) => {
const date = match.params.date;
const ext = match.params.ext;
return match && <h2>demo: {date}{ext}</h2>
}}></Route>

[React Router v4] Use Regular Expressions with Routes的更多相关文章

  1. [React Router v4] Render Multiple Components for the Same Route

    React Router v4 allows us to render Routes as components wherever we like in our components. This ca ...

  2. [React Router v4] Render Catch-All Routes with the Switch Component

    There are many cases where we will need a catch-all route in our web applications. This can include ...

  3. [React Router v4] Render Nested Routes

    With React Router v4 the entire library is built as a series of React components. That means that cr ...

  4. [React Router v4] Conditionally Render a Route with the Switch Component

    We often want to render a Route conditionally within our application. In React Router v4, the Route ...

  5. [Web 前端] React Router v4 入坑指南

    cp from : https://www.jianshu.com/p/6a45e2dfc9d9 万恶的根源 距离React Router v4 正式发布也已经过去三个月了,这周把一个React的架子 ...

  6. React Router V4发布

    React Router V4 正式版发布,该版本相较于前面三个版本有根本性变化,遵循 Just Component 的 API 设计理念. 本次升级的主要变更有: 声明式 Declarative 可 ...

  7. [React Router v4] Intercept Route Changes

    If a user has entered some input, or the current Route is in a “dirty” state and we want to confirm ...

  8. [React Router v4] Redirect to Another Page

    Overriding a browser's current location without breaking the back button or causing an infinite redi ...

  9. [React Router v4] Parse Query Parameters

    React Router v4 ignores query parameters entirely. That means that it is up to you to parse them so ...

随机推荐

  1. 洛谷 P1223 排队接水

    洛谷 P1223 排队接水 题目描述 有n个人在一个水龙头前排队接水,假如每个人接水的时间为Ti,请编程找出这n个人排队的一种顺序,使得n个人的平均等待时间最小. 输入输出格式 输入格式: 输入文件共 ...

  2. textview-显示行数限制

    在代码中直接添加 android:maxLines="2" android:ellipsize="end" 跟ellipsize搭配使用,超过两行的时候,第二行 ...

  3. docker第一章

    简介 Docker 是 Docker.Inc 公司开源的一个基于 LXC技术之上构建的Container容器引擎, 源代码托管在 GitHub 上, 基于Go语言并遵从Apache2.0协议开源. D ...

  4. nuxt.js配置BASE_URL(基本域名)和NODE_ENV(环境变量)

    一直以来,开发环境和生产环境的数据接口域名不一样总是困扰着我 每次打测试包或者线上包,我都得手动切换域名,我相信很多人的做法跟这差不多,类似下面这样: (你已经注意到,这个文件已经被我无情的删除了,因 ...

  5. 无法解决 React 启动的报错

    E:\React\react_blank>npm start > react_blank@0.1.0 start E:\React\react_blank > react-scrip ...

  6. angular 响应式自定义表单控件—注册头像实例

    1. 组件继承ControlValueAccessor,ControlValueAccessor接口需要实现三个必选方法 writeValue() 用于向元素中写入值,获取表单的元素的元素值 regi ...

  7. set_fix_multiple_port_nets

    set_fix_multiple_port_nets   -all    -buffer_constants 加上这个命令之后 综合之后的网表就不会出现assign语句 否则会出现

  8. oracle高效分页存储过程(百万数据级)

    create or replace procedure Pager( page in number,--数据页数,从1开始 pageSize in number,--每页大小 tableName nv ...

  9. python中如何在一张图上画两条折线

    摘自:https://segmentfault.com/q/1010000002760775

  10. 使用wepy开发微信小程序商城第一篇:项目初始化

    使用wepy开发微信小程序商城 第一篇:项目初始化 前言: wepy小程序项目初始化的操作,官方文档看了好几遍,感觉写得不是很清楚. 这篇写得挺好的:小程序开发之wepy 1.初始化项目 (1)全局安 ...