React Router v4 - 动态嵌套路径答案

【问题标题】：React Router v4 - Dynamic Nested PathsReact Router v4 - 动态嵌套路径
【发布时间】：2017-05-31 23:34:03
【问题描述】：

我正在尝试处理这样的路线 <Route path="/:first/:second?/:third?" /> 其中“first”之后的可选参数的数量是未知的。在 React Router v4 中解决这个问题的最佳实践是什么？

【问题讨论】：

【解决方案1】：

也许你可以用 path-to-regexp 做一些花哨的事情，这是 react 路由器用来解析路径的，但是制作一个解析位置并将其重新格式化为动态路径的自定义路由似乎很容易！

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 将是基于 url 的任意数量的动态参数。

【讨论】：