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

【问题标题】：React Router v4 + Regex don't like Template LiteralsReact Router v4 + Regex 不喜欢模板文字
【发布时间】：2017-08-21 09:33:20
【问题描述】：

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

可能有一个很好的解释（总是有），但我真的很感激一些指示，因为这感觉有点混乱。提前致谢。

【问题讨论】：

标签： ecmascript-6 react-router template-literals

【解决方案1】：

好的，我想我发布这个问题的速度太快了。

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

=> "不解释反斜杠"

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

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

【讨论】：

它知道 /folder/21 但 /folder/21abc 应该是无效路由，这就是检查失败并反应路由器尝试呈现无效路由的地方。