Question

React Router 4.0.0附带 Regex 来验证查询字符串参数。但是，它似乎与ES6模板文字不兼容。

这是一个非常简单的例子：

<BrowserRouter>
  <Switch>
    <Route Route path={routeConstant} component={MyComponent} />
  </Switch>
</BrowserRouter>

如果您尝试使用以下值，您将看到前两个常量有效，但第三个没有。

const root = 'folder'
const routeConstant1 = '/folder/:id(\d+)'  // <= /folder/21 matches
const routeConstant2 = `/${root}/:id`      // <= /folder/21 matches
const routeConstant3 = `/${root}/:id(\d+)` // <= /folder/21 does not match

可能有一个非常好的解释（总是存在），但我真的很感激一些指针，因为这感觉有点令人困惑。提前谢谢。

Answer 1

好吧，我猜这个问题太快了。

答案在于模板文字的工作方式： ECMAScript 6 - Template Literals

=＆GT; “反斜杠不被解释”

所以让routeConstant3工作的解决方案就是这样写：

const routeConstant3 = `/${root}/:id(\\d+)`

React Router v4 + Regex不喜欢模板文字

1 个答案: