Question

我试图处理这样的路线 <Route path="/:first/:second?/:third?" /> 在＆＃34; first＆＃34;之后的可选参数的数量不明。在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将是基于网址的任意数量的动态参数。

React Router v4 - 动态嵌套路径

1 个答案: