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将任意数量的基础上，网址动态参数的个数。