ReactRouter v4 でpathに変数と正規表現を用いる方法

<BrowserRouter>
  <Switch>
    <Route path={`${hoge}/fuga/:id(\d+)`} component={MyComponent} />
  </Switch>
</BrowserRouter>

ReactRouterでpathに変数と正規表現を用いたい時、
上のように、テンプレートリテラル(文字列の中に変数を含める書き方)を用いて、
pathに変数を含め、正規表現のチェック(:idが整数である)を行おうとしてもうまく行かない現象でハマりました。

原因

JavaScriptのテンプレートリテラルではバックスラッシュをそのままでは扱えない(エスケープする必要がある)

解決策

<Route path={`${hoge}/fuga/:id(\\d+)`} component={MyComponent} />

バックスラッシュを2個にしてあげると、うまく動作します。

参考URL: https://stackoverflow.com/questions/43067371/react-router-v4-regex-dont-like-template-literals