React-router: Regex in path?

[jenil]

Hello,

Is there a provision for something like <Route name="EventListing" path={/\/(movies|concerts|plays)/} handler={EventsList} />?

[ryanflorence]

Nope. Just make three routes that use the same handler.

[phun-ky]

Hm, this is an old issue, but in my current team we have this issue:

<Route path={'/apples/:appleId'} component="AppleComponent"/>
<Route path={'/apples/:appleId/otherstuff/**/'} component="OtherStuffComponent"/>
<Route path={'/apples/:fruidId/someotherstuff/**/'} component="SomeOtherComponent"/>
<Route path={'/apples/:fruidId/someotherstuff/**/'} component="SomeOtherOtherComponent"/>

or

<Route path={'/apples} component="ApplesComponent">
  <Route path={':appleId'} component="AppleComponent">
    <Route path={'otherstuff/**/'} component="OtherStuffComponent"/>
  </Route
  <Route path={':fruidId/otherstuff/**/'} component="SomeOtherComponent"/>
  <Route path={':fruidId/otherstuff/**/'} component="SomeOtherOtherComponent"/>
</Route

The first one works, but not providing a meaningful path for packages/components relying on the path hierarchy, for example react-breadcrumbs. The last one makes :appleId greedy

If the path had regex support, we could solve this in a better way (with correct hierarchy)

[sassanh]

@ryanflorence sorry for mentioning you here. But as this thread is closed I just wanted you to notice it again or maybe reopen it. There are things that can be done easily by regex and to so with current wildcard used in react-router developer needs hacks and duplicating code, etc.

I guess you're aware of this but let me know if we need a list of things that current wildcard system fails to do and regex can. If we try to expand its functionality as discussed here https://github.com/reactjs/react-router/issues/142 we'll end up reinventing regex. I think best would be to support regex just like Django does for example: https://docs.djangoproject.com/en/1.10/topics/http/urls/

[jalooc]

For me too, dealing with path not being able to accept a regex is a pain for it enforces some hackish solutions for things that could be handled with regex in one line. What is more, the docs suggest, that path can be anything that path-to-regexp understands, so I guess regex should be included.

The most interesting part is, as far as I can see, that path does work with regex, only the PropType is string. @ryanflorence How about changing the PropType then? :)

EDIT: Something like this #4900 might do? The tests pass and it works in my cases, not sure if it's okay for other dependent packages, like the native routing for example.

[harlantwood]

react router 4 support regex paths, eg:

<Route exact path="/commit/:git_commit([0-9a-fA-f]{40})" component={ViewCommit} />

[albertstill]

I don't think it does support Regex, the link above requires payment, and I only see path-to-regexp in the source.

A React Router 4 solution using string paths and a Regexp in the render prop can look like this:

<Switch>
  { ...other routes }
  <Route
    path="/:slug"
    exact
    strict
    render={({ match }) => {
      if (!/^[A-Za-z0-9]{6}$/.test(match.params.slug)) {
        return <NotFound />;
      }
      return <CommitmentPage />;
    }}
  />
  <Route component={NotFound} />
</Switch>

Here /about-us does not match but /fU3oE8 does.

[sassanh]

React Router 4 does support regex. He provided an example apart from the link.

[albertstill]

Ah oops nice one, the path-to-regexp library React Routers uses supports custom match parameters in the string. Thanks

[polkovnikov-ph]

@timdorr Can we please remove the shameless ad up there with paywalled article on egghead?

[Mindaugas-Jacionis]

Hi, any option for negative regexp. I have 2 routes /subscribe/:token && /subscribe/success, I would like to have something: /subscribe/:token(*|!success) to exclude success from route with :token. Otherwise I get the one with token param rendered & not the one for the success.

I've tried this: /subscribe/:token((?!success).*), but got some crazy error.

[u-rogel]

@Mindaugas-Jacionis I guess it is not the solution you wanted but will work.

    <Route path="/subscribe/success" exact component={Success} />
    <Route path="/subscribe/:token" exact component={Token} />

When you place it like this in the switch component, the success path will be matched before the :token path is.