reactjs - 为什么路由的可选参数旁边有括号

Question

我是 React 新手。只是一个关于BrowserRouter(Router)的问题。

我看到一些代码如下:

import { BrowserRouter as Router } from "react-router-dom";

...
<Switch>
    {routes.map(r =>
        <Route key={r.url}
            path={`/:datatype(${r.datatype})/:mode?/:id?`}
            component={xxx} />
    )}
    <Redirect to={xxx} />
</Switch>

为什么可选数据类型参数旁边有括号:

`/:datatype("product")/:mode?/:id?`    // let's say r.datatype is a string of "products"

Full source code on GitHub

Answer 1

:datatype(${r.datatype}) 是 custom match范围。仅当 datatype 参数与 r.datatype 中的正则表达式匹配时，Route 才被视为匹配。在您的示例中，正则表达式是字符串 "product"，它需要完全匹配。

要测试它，请尝试此 Express Route Tester 。使用路线:

/:datatype(product)/:mode?/:id

• 对于路径 /product/random/123，它返回与评估为 product 的数据类型的匹配项。
• 对于路径 /blog/random/123，它将不匹配。

React Router 使用 path-to-regexp 匹配路径.