React Router v4 + Regex don't like Template Literals

Question

React Router 4.0.0 comes with Regex to validate the querystring parameters. However, it does not seem compatible with ES6 Template Literals.

Here is a very simple example :

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

If you try with the following values, you'll see that the first 2 constants work, but the third does not.

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

There is probably a very good explanation (there always is), but I'd really appreciate a few pointers because that feels a bit confusing. Thanks in advance.

Mose · Accepted Answer · 2017-03-28 10:51:08Z

2

Ok, I posted that question too fast I guess.

The answer is in the way Template Literals work : ECMAScript 6 - Template Literals

=> "backslashes are not interpreted"

So the solution to have routeConstant3 work is simply to write it like this :

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

answered Mar 28, 2017 at 10:51

Mose

1,9313 gold badges18 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Abhijeet_IXR Over a year ago

It knows /folder/21 but /folder/21abc should be an invalid route, which is where this check fails and react router attempts to render invalid route.

Collectives™ on Stack Overflow

React Router v4 + Regex don't like Template Literals

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related