React路由器v4 - 動態嵌套路徑

Question

我試圖處理這樣的路由 <Route path="/:first/:second?/:third?" /> 其中「first」之後的可選參數數量未知。在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} />; 
    }} 
    /> 
); 

然後其他任何地方：

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

其中match.params將任意數量的基礎上，網址動態參數的個數。