リアクタルータv4 - ダイナミックネストされたパス

Question

私はこのようなルートを処理しようとしています <Route path="/:first/:second?/:third?" /> "最初の"の後のオプションのパラメータの量は不明です。 React Router v4でこれに近づくためのベストプラクティスは何ですか？

Answer 1

path-to-regexpは、ルータが経路を解決するために使用するものですが、場所を解析して動的経路に再フォーマットするカスタム経路を作るのはかなり簡単でしょう。

let NoArityRoute = ({ component }) => (
    <Route 
    children={({ location }) => { 
     let params = location.pathname.split("/"); 
     let first = params[1]; 
     let rest = params.slice(2); 
     let path = `/:${first}${rest.map(x => `/:${x}?`).join("")}`; 
     return <Route path={path} component={component} />; 
    }} 
    /> 
); 

次にどこに他：match.paramsは、URLに基​​づいて動的な引数の任意の数になります

<NoArityRoute 
    component={({ match }) => (
    <div>params: {JSON.stringify(match.params)}</div> 
)} 
/> 

。