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参数。仅当Route参数与datatype中的正则表达式匹配时，r.datatype才被视为匹配。在您的示例中，正则表达式是字符串"product"，它需要完全匹配。

要对其进行测试，请尝试使用此Express Route Tester。使用路线：

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

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

反应路由器使用path-to-regexp匹配路径。

Answer 2

您无需在路线上加上括号，可以像这样使用传递参数。

我希望这会有所帮助。

<BrowserRouter>
  <Switch>
    <Route
      path="/editcategory/:id"
      render={props => {
        return <EditCategory {...props} />
      }}
    />      
  </Switch>
<BrowserRouter>

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

2 个答案: