Question

我真的不知道如何用例如正则表达式约束params 如何区分这两条路线？

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

并防止＆＃34; / 123＆＃34;从解雇第一条路线？

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

*请注意，上面的代码没有运行，只是为了显示我的意思。

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

2 个答案: