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. 洛谷——P1056 排座椅

    https://www.luogu.org/problem/show?pid=1056#sub 题目描述 上课的时候总会有一些同学和前后左右的人交头接耳,这是令小学班主任十分头疼的一件事情.不过,班主 ...

  2. 大数据- Hive

    构建在Hadoop之上的数据仓库,数据计算使用MR,数据存储使用HDFS         由于数据计算使用mapreduce.因此通经常使用于进行离线数据处理 Hive 定义了一种类 SQL 查询语言 ...

  3. [NPM] Update published npm packages using np

    When we want to update our package we need to do a few things: pull latest from our git remote, bump ...

  4. sass工具、相关插件

    http://koala-app.com/index-zh.html 下载koala 把css文件夹(包含.scss后缀的文件)整个拖进去: 然后在sublime打开.scss文件编译,自动生成css ...

  5. Windows Forms 布局篇

    1,锚定功能(Anchor属性) 默认为“Top,Left”,不管窗体大小如果改变,保持相对于窗体左上角的位置. 如果设置为”Top,Bottom,Left,Right”这样,控件的大小将随窗体的大小 ...

  6. Android 一个异步SocketHelper

    发送流程:首先定义一个缓冲池,发送数据时仅仅是将待发送的数据加入到缓冲池中,再由后台的工作线程从缓冲池中取得待发送数据进行发送.可能某些情况下在数据发送完成时需要做一些处理(比如写日志),便定义了一个 ...

  7. oracle主机名修改

    转自:http://www.cnblogs.com/tippoint/archive/2013/04/07/3003810.html 有的情况下,我们需要修改已经安装oracle数据库的主机名.以下是 ...

  8. 我的Go语言学习之旅三:Go语言中的for循环

    这个但是为难我了,我一直是走在WEB前的程序猿,各种循环用起来得心应手.突然间发现到了Go这里竟然行不通了,查阅后才发现,原来Go的for是这样写的. for i:=0;i<10;i++{ fm ...

  9. [Web Security] Create a hash salt password which can stored in DB

    We cannot directly store user password in the database. What need to do is creating a hashed & s ...

  10. 【AtCoder ABC 075 D】Axis-Parallel Rectangle

    [链接] 我是链接,点我呀:) [题意] 让你找到一个各边和坐标轴平行的矩形.使得这个矩形包含至少K个点. 且这个矩形的面积最小. [题解] 把所有的"关键点""都找出来 ...