React路由器 - 如何在路由匹配中約束參數？

Question

我真的不知道如何限制params，例如正則表達式。
如何區分這兩條路線？

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

並阻止「/ 123」發射第一條路線？

Answer 1

陣營路由器V4現在允許你使用正則表達式匹配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> 

Answer 2

我不確定此刻React路由器是否可以實現這一點。但是，您的問題有一個簡單的解決方案。只是做INT /阿爾法檢查的另一個組件，如下所示：

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

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

*請注意，上面的代碼不會運行，它只是在那裏展示了我的意思。

最好的事情可能是如果你可以使用兩個不同的路由，因爲通過param類型區分路由可能會引起混淆。