React Router: come limitare i parametri nella corrispondenza del percorso?

Question

In realtà non capisco come limitare i param con, ad esempio una regex.
Come differenziare questi due percorsi?

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

E impedire "/ 123" di sparare il primo percorso?

Answer 1

React-router v4 ora consente di utilizzare espressioni regolari per abbinare 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

Non sono sicuro se questo è possibile con il router React al momento. Tuttavia c'è una soluzione semplice al tuo problema. Basta fare il controllo int/alfa in un altro componente, in questo modo:

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

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

* Si noti che il codice di cui sopra non viene eseguito, è solo lì per mostrare quello che voglio dire.

La cosa migliore è probabilmente se è possibile utilizzare due percorsi diversi, poiché la differenziazione dei percorsi in base al tipo di param può creare confusione.