React Router - how to constrain params in route matching?

Question

I don\'t really get how to constrain params with, for example a regex.
How to differentiate these two routes?

Answer 1

React-router v4 now allows you to use regexes to match params -- https://reacttraining.com/react-router/web/api/Route/path-string

const NumberRoute = () => <div>Number Route</div>;
const StringRoute = () => <div>String Route</div>;

<Router>
    <Switch>
        <Route exact path="/foo/:id(\\d+)" component={NumberRoute}/>
        <Route exact path="/foo/:path(\\w+)" component={StringRoute}/>
    </Switch>
</Router>

More info: https://github.com/pillarjs/path-to-regexp/tree/v1.7.0#custom-match-parameters

Answer 2

I'm not sure if this is possible with React router at the moment. However there's a simple solution to your problem. Just do the int/alpha check in another component, like this:

<Router>
    <Route path="/:index" component={Child0} />
</Router>

const Child0 = (props) => {
    let n = props.params.index;
    if (!isNumeric(n)) {
        return <Child1 />;
    } else {
        return <Child2 />;
    }
}

* Note that the code above does not run, it's just there to show what I mean.