React Router - как ограничить параметры при сопоставлении маршрутов?

Я не понимаю, как ограничить параметры с помощью, например, регулярного выражения. Как дифференцировать эти два маршрута?

  <Router>
    <Route path="/:alpha_index" component={Child1} />
    <Route path="/:numeric_index" component={Child2} />
  </Router>

И предотвратить "/123" от запуска первого маршрута?

Ответы

Ответ 1

Теперь React-router v4 позволяет вам использовать регулярные выражения для соответствия параметрам - 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>

Ответ 2

Я не уверен, если это возможно с маршрутизатором React на данный момент. Однако есть простое решение вашей проблемы. Просто выполните проверку int/alpha в другом компоненте, например так:

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

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

* Обратите внимание, что приведенный выше код не запускается, он просто показывает, что я имею в виду.