reactjs - React Router 声明性重定向，同时保留路径的一部分

Question

我最近不得不更改应用程序中的路径，但我想通过重定向来保留旧深层链接的有效性。以下是更改路径的示例:

原文:/foo/users/12345

更新:/bar/users/12345

我尝试使用重定向来实现此目的:

<Route path='/bar' component={MyComponent} />
<Route path='/foo'>
  <Redirect to='/bar' />
</Route>

但是，请求的后半部分会在重定向中丢失。因此，对 /foo/users/12345 的请求会重定向到 /bar。

是否有一种声明性方式可以在重定向中传递路径的 /users/12345 部分？

Answer 1

我正在查看文档，但没有找到针对您在问题中所解释的这种情况的任何开箱即用的解决方案。

我没有尝试使用Redirect，而是构建了一个功能组件，该组件已设置为原始路由的组件。这有助于重定向，并且可以用于此目的，如下所示:

<Route path='/foo/:users?/:id?' component={RedirectHelper}/>
<Route path='/bar/:users?/:id?' component={MyComponent}/>

RedirectHelper 如下所示:

const RedirectHelper = (props) => {
  const {history} = props;
  const path = history.location.pathname.replace('/foo', '');
  history.push(`/bar${path}`);
  return null;
}

因此从技术上讲，RedirectHelper 组件从原始 ~foo/users/12345 的 history.location.pathname 属性中获取值URL 并构建新的。最后它只是重定向到 ~bar/users/12345 URL。保留原件的有效性。我已经测试了这个解决方案并且非常有效。

希望这有帮助!