React Router - 如何在路由匹配中约束params？

Question

我真的没有得到如何约束params,例如正则表达式.
如何区分这两条路线？

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

并防止"/ 123"发射第一条路线？

Answer 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>

Answer 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 />;
    }
}

*请注意,上面的代码没有运行,只是在那里显示我的意思.