如何将所有以foo开头的路由路径重定向到以bar开头的路径

Question

下面的示例展示了我想要实现的目标：

/foo => /bar
/foo/a => /bar/a
/foo/a/b => /bar/a/b
/foo/a/b/c => /bar/a/b/c
...

我试过<Redirect from="/foo/(.*)" to="/bar/(.*)" />，但是当通配符匹配两个或多个路径段时它不起作用。具体来说，/foo/a/b 将变为 /bar/a%2F/b 而不是 /bar/a/b。

我想到的唯一可行的方法是使用函数生成多个 Redirect，如下所示：

function generate(fromPrefix, toPrefix, maxLevel = 5) {
  return Array(maxLevel)
    .fill()
    .map((_, i) => {
      const wildcards = Array(maxLevel - i)
        .fill('(.*)')
        .join('/');
      const from = `${fromPrefix}/${wildcards}`;
      const to = `${toPrefix}/${wildcards}`;
      return <Redirect from={from} to={to} />;
    });
}

有更好的方法吗？

Answer 1

使用稍微更宽松的正则表达式。

<Redirect from="/foo*" to="/bar*" />

如何将所有以foo开头的路由路径重定向到以bar开头的路径

How to redirect all the route paths starting with foo to paths starting with bar

react-router

path-to-regexp