React Router 声明性重定向，同时保留部分路径答案

【问题标题】：React Router declarative redirect while preserving a portion of the pathReact Router 声明性重定向，同时保留部分路径
【发布时间】：2020-02-07 01:16:06
【问题描述】：

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

原文：/foo/users/12345

更新：/bar/users/12345

我尝试使用重定向来实现这一点：

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

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

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

【问题讨论】：

我不明白你的问题。你能改写吗？是否要更改 url 中的路径但为不同的路径呈现特定组件？
不，我基本上想将/foo* 重定向到/bar*，其中保留了与splat 匹配的部分。

标签： reactjs react-router

【解决方案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 URL 的history.location.pathname 属性中获取值并构建新的。最后它只是重定向到~bar/users/12345 URL。保留原件的有效性。我已经测试了这个解决方案，并且工作起来很有魅力。

希望这会有所帮助！

【讨论】：

有趣......这正是我所希望的。你能解释一下为什么我需要返回一个空的 div 吗？我注意到如果我返回 undefined 它会使新路径段加倍并且不能正常工作。
@djfdev RedirectHelper 仍然是一个需要返回有效 HTML 或 null 的组件。该解决方案只是使您的要求工作的一种解决方法。很好，让我更新到null，我更喜欢那个。我用null 值做了额外的测试，效果也很好。如果解决方案有效并回答了您的问题，请随时接受作为答案，谢谢。

【解决方案2】：

如果你在path 中加入一个正则表达式会怎样

<Route path='/(bar|foo)/' component={MyComponent} />

如回答here

【讨论】：