react-router v4 路由規則解析

前言

react-router升級到4之后，跟前面版本比有了很大的差別。
例如包的拆分，動態路由等詳細的差別就不說了，各位大神的總結也很到位，詳細可以點擊看看，All About React Router 4這篇文章。
此外還有個差別是路由規則的變化。 一直有着上個版本的習慣，所以稍微復雜的路由，配起來的時候簡直痛不欲生。
痛定思痛，要好好了解下其依賴的匹配規則，即path-to-regexp。

本文期望讀者是對react-router有過使用的同學，不然本文省略了太多東西，可能看起來可能有點太亂。

path-to-regexp 是什么

其文檔一句話介紹很簡潔明了: 將路徑字符串（如/user/：name）轉換為正則表達式。react-router matchPath就是基於其來匹配了。

使用

var pathToRegexp = require('path-to-regexp')

// pathToRegexp(path, keys?, options?)
// pathToRegexp.parse(path)
// pathToRegexp.compile(path)

參數：

• path: 字符串、字符串數組、正則表達式
• keys 可選 由在path里找到的key組成的數組
• options 可選 由下面幾部分組成：
  1. 敏感匹配 默認false，當為true時，正則將區分大小寫
  2. 嚴格模式 默認false 為true，將會匹配可選的緊跟的分隔符
  3. end 默認true 正則是否匹配至字符串結尾
  4. start 默認true 是否從字符串開始進行匹配
  5. 高階選項（用於非路徑名稱字符串，例如主機名稱hostname）
     1. 分隔符 默認每段的分隔符是'/'
     2. 結尾字符 可選字段或字段列表、用於作為結束字符
     3. 分隔符列表 解析時要當做分隔符考慮的字段列表 默認‘./’

還是直接看官方例子吧

// 匹配的path中關鍵字，得到由其組成的數組
// 簡而言之，就是匹配的結果，增加該參數，可以更方便的使用和分析
var keys = []
var re = pathToRegexp('/foo/:bar', keys)
// 執行結果，轉換之后的正則就如下
// re = /^\/foo\/([^\/]+?)\/?$/i
// 得到的路由相關信息
keys = [
    { 
        // 路由path中的參數名稱
        name: 'bar', 
        // 前綴，分隔符等    
        prefix: '/', 
        delimiter: '/', 
        optional: false, 
        repeat: false, 
        pattern: '[^\\/]+?' 
    }
]

這樣看起來應該清楚一下，下面繼續看使用規則

規則

最簡單的例子（結合react-router-config 路由最簡單的路由可以如下， 各字段含義就不提了，本文只關注匹配規則）:

const routes = [
  { component: Root,  
    routes: [
      { 
        //只匹配/  
        path: '/',
        exact: true,
        component: Home
      }
    ]
  }
]  

看起來也不過爾爾，簡單匹配就完了，但是如果要是有比較復雜的路徑的話，例如有這么一個路徑:'/a/1/3.html' 其實/1/3都是可以省略的也是可選的，也就是說如下面這樣：

'/a/1/3.html'
'/a.html'
'/a/2.html'

先不要急着寫，這種當然是要有按照相應規則來匹配了，先看下對應規則：

參數

路徑參數將會被用來定義參數和匹配關鍵字列表(即我們的keys)

命名參數

命名參數通過如下形式定義： 在參數前面加上引號，例如：‘：foo’。默認情況下，在path的該區域結束之前的部分都會被匹配到(默認的話也就是兩個//之間為一個區域，例如/:foo/，那么:foo 部分就是一個區域(segment))。

var re = pathToRegexp('/:foo/:bar')
// 對應的匹配key數組如下
keys = [
    { name: 'foo', prefix: '/', ... },
    { name: 'bar', prefix: '/', ... }
]
// 對於下面的path，執行結果
re.exec('/test/route')
//=> ['/test/route', 'test', 'route']

參數修飾符

可選

參數后綴可以加上一個可選標識即'?',表明該參數可選,這樣情況下該部分參數如果沒有也不正確匹配，只不過在匹配結果里值為undefined

var re = pathToRegexp('/:foo/:bar?')
keys = [
    { name: 'foo', ... }, 
    { 
    name: 'bar', 
    delimiter: '/', 
    // 匹配key數組第二部分就為true，表明該參數可選
    optional: true, 
    repeat: false }
]
// 可省略候選bar對應的部分
re.exec('/test')
//=> ['/test', 'test', undefined]

re.exec('/test/route')
//=> ['/test', 'test', 'route']

0-n

當然參數可以以*結尾，標識該部分參數0-n(可以類比正則)。每個匹配都會將前綴(/)考慮進去，即/已經不是默認的區塊分割了，這也是跟？的區別。看例子比較清晰

var re = pathToRegexp('/:foo*')
// keys = [{ name: 'foo', delimiter: '/', optional: true, repeat: true }]

re.exec('/')
//=> ['/', undefined]
// 主要看這里，這時候/baz的內容同樣被當成 foo的value組成部分了，直接和前面的一起輸出
re.exec('/bar/baz')
//=> ['/bar/baz', 'bar/baz']

對比下？修飾符，應該比較清楚了。

var re = pathToRegexp('/:foo?')

// 直接認為是不匹配的，輸出為null
re.exec('/bar/baz')
//=> null

1-n

參數以+結尾時，表明該部分參數至少為1，同樣會將分隔符計算進來。可以對比下上面與*的區別

var re = pathToRegexp('/:foo+')
// keys = [{ name: 'foo', delimiter: '/', optional: false, repeat: true }]
// 此時/ 的路由已經不能匹配了，至少有一個參數
re.exec('/')
//=> null
// 這里倒是跟*一樣
re.exec('/bar/baz')
//=> ['/bar/baz', 'bar/baz']

自定義匹配參數

所有的參數都可以提供自定義的匹配規則，來覆蓋默認規則([^/]+)，如下匹配數字的例子：

// 這里自定的規則就是我們的數字匹配了(\d+) 
var re = pathToRegexp('/icon-:foo(\\d+).png')
// keys = [{ name: 'foo', ... }]

re.exec('/icon-123.png')
//=> ['/icon-123.png', '123']

re.exec('/icon-abc.png')
//=> null

注意：自定義規則中反斜杠()前面需要再加一個反斜杠，例如上線的例子(\d+)(這里跟正則不太一致，記得別混淆)

未命名參數

未命名的參數當然也是可行的，即只包含修飾符的群組。和命名參數的功能一樣，只不過其name不是對應的key而是數字下標

// 第二個區塊，匹配的是所有字符.*，顯然是未命名的
var re = pathToRegexp('/:foo/(.*)')
keys = [
{ name: 'foo', ... }, 
// name就是0了，再有一個則按順序排列    
{ name: 0, ... }]
// 結果沒什么差別。
re.exec('/test/route')
//=> ['/test/route', 'test', 'route']  

注意： react-router v4 不再處理querystring了，大家可以使用各種工具來處理，自己擼個工具也行。

到這里參數部分已經結束了，回到上面的部分，/a/1/3.html。后面兩個參數可選。
具體規則可以如下配置。

const routes = [
  { component: Root,  
    routes: [
      {  
        path: '/a(/)?:num1?(/)?:num2?(/)?',
        exact: true,
        component: Home
      }
    ]
  }
]  

是不是感覺日了那什么，有這么復雜嗎，來我們仔細看看有沒有這么復雜。

1. /a是固定的，可以不變，第一部分確定。
2. 后面這個1對應num1，且可選 /a/:num1?
3. 3對應num2,同樣可選 /a/:num1?/:num2?.html

看起來應該是這樣。那么來試一試吧。

var re = pathToRegexp('/a/:num1?/:num2?.html')
// 第一種情況是滿足的，並且正確的得到value了。 3，4
console.log(re.exec('/a/3/4.html')) 
// [ '/a/3/4.html', '3', '4', index: 0, input: '/a/3/4.html' ]
// 這里看起來沒問題，但是我們第一個匹配num1 是 undefined
// 這樣順序就亂了，這里應該是num1而非num2
console.log(re.exec('/a/4.html'))
// [ '/a/4.html', undefined, '4', index: 0, input: '/a/4.html' ]

// 直接不能匹配了
console.log(re.exec('/a.html'))
// null

這里的問題就在於連續兩個可選參數的情況下，單純的使用？就不滿足了。

按照上面的表達式，匹配的應該是第一個參數可選，但只有一個參數時，4.html連着一起，認為是num2的value了。
上面的表達式轉換為正則之后如下，有興趣可以研究下：
這里的4.html命中的是后面的([^/]+?)?.html(?😕)?$

/^\/a(?:\/([^\/]+?))?\/([^\/]+?)?\.html(?:\/)?$/i

對着上面的文檔思考下，可以自定義可選參數，那么我們可不可以這樣來試試(講真的，開始真是試的)：

指明前綴也是可選，表明.html不是跟最后一個區塊緊密相連，這樣應該可以滿足要求

var re = pathToRegexp('/a(/)?:num1?(/)?:num2?.html')
console.log(re.exec('/a/0/4.html'))
//[ '/a/0/4.html', '/', '0', '/', '4', index: 0, input: '/a/0/4.html' ]
// 滿足需求，這樣4其實為num2的value 
console.log(re.exec('/a/4.html'))
//[ '/a/4.html','/','4',undefined,undefined,index: 0,input: '/a/4.html' ]
// 第三種滿足情況
console.log(re.exec('/a.html'))
// [ '/a.html',undefined,undefined,undefined,undefined,index: 0,input: '/a.html' ]

這樣總算滿足需求了。

方法

有以下這么幾個，這里就不詳細介紹了。

• Parse 返回一個字符串和keys的數組。
• Compile ("Reverse" Path-To-RegExp) 將字符串轉換為有效路徑。
• 其他的參考官網

結束語

到這里關於react-router V4 路由規則部分的解析就結束了。起因也是自己在配置路由時有點懵，不想就那樣跟着別人的路由配完就完了。知其然也要知其所以然，應該是我們技術人員一直秉承的一個態度，所以自己總結了一下，拋磚引玉，以供自己記憶和有需要的同學參考。
更多我的博客請移步

參考文章

• path-to-regexp文檔
• https://css-tricks.com/react-router-4/