如何在 React-Router 4 <Switch><Redirect> 中保留查询字符串和哈希片段？

Question

如果您在<Route> 中有一个<Redirect>，您将获得一个location，并且可以这样做：<Redirect search={props.location.search} hash={props.location.hash} ...。

但是，当直接在顶级<Switch> 内时，<Redirect> 没有任何props.location 可以访问search 和hash。

有没有办法直接在顶级<Switch> 之后的<Redirect> 中保留查询字符串和哈希片段（树中没有更高的<Route>）？

示例：（打字稿）

Router({},
  Switch({},
    Redirect({ path: '/', to: '/latest', exact: true }))))

将to: '/latest' 更改为to: { pathname:... search:.. hash:.. } 不起作用，因为没有props.location 可用于访问原始.search 和.hash on。

在这里（https://github.com/ReactTraining/react-router/issues/5818#issuecomment-384934176），开发人员说保留查询和哈希问题已经解决，但我找不到在上述情况下有效的任何东西：

> 重定向时保存查询字符串的任何选项？

> 它将在 4.3.0 中实现。在此处查看发行说明：https://github.com/ReactTraining/react-router/releases/tag/v4.3.0-rc.1

这些发行说明链接到：https://github.com/ReactTraining/react-router/pull/5209，其中没有提及任何似乎可行的内容。

也许他们已经只在<Route> 中表示<Redirect> 了？然后，可以执行以下操作：

Route({ path: ..., render: (props) => function() {
  Redirect({ to: { pathname:... search: props.location.search, ... } ...}));

Answer 1

在<Redirect /> 组件获得自己的历史订阅者之前，您可以创建自己的：

const RouteAwareRedirect = props => (
  <Route render={routeProps => 
    <Redirect to={props.to(routeProps)} />
  }/>
)

然后在任何你想要的地方使用它：

<RouteAwareRedirect to={({ location }) => ({ 
  // use location.pathname, etc .. 
}) />

Answer 2

如果没有其他方法（显然没有，请参阅 Azium 的答案）...那么这有效 :-) 至少与 exact 和 strict 两者都 true （尚未测试其他组合） .

像这样使用：（它只会改变路径，而不是查询字符串或哈希）

RedirPath({ path: '/', to: '/latest', exact: true })

在<Switch> 中工作，上面没有<Route>。里面有一个<Route>：- P 你需要删除dieIf。

许可证：麻省理工学院。 （不是 CC0。）

/**
 * Redirects the URL path only — preserves query string and hash fragment.
 */
export function RedirPath(props: { path: string, to: string, exact: boolean, strict?: boolean }) {
  // @ifdef DEBUG
  dieIf(props.to.indexOf('?') >= 0, 'TyE2ABKS0');
  dieIf(props.to.indexOf('#') >= 0, 'TyE5BKRP2');
  // @endif
  const path = props.path;
  const exact = props.exact;
  const strict = props.strict;
  return Route({ path, exact, strict, render: (routeProps) => {
    return Redirect({
      from: path, exact, strict,
      to: {
        pathname: props.to,
        search: routeProps.location.search,
        hash: routeProps.location.hash }});
  }});
}

Answer 3

你可以像这样扩展<Redirect />：

const UtmFriendlyRedirect = props => (
    <Redirect computedMatch={props.computedMatch}
              to={{pathname: props.to, search: props.location.search}}/>
)

然后像普通重定向一样使用它：

<UtmFriendlyRedirect from='/:articleId' to='/article/:articleId'/>

Answer 4

在我非常有限的测试中，这会保留所有搜索参数。

const RedirectAndPreserveSearch = ({ to, ...additionalProps }) => (
  <Redirect
    {...additionalProps}
    to={{
      pathname: to,
      search: new URL(window.location.href).search,
    }}
  />
);

我认为这只有在没有其他任何东西干扰搜索参数的情况下才有效（我不确定这是否会更新组件？它可能会从安装时使用搜索参数重定向？）

我还没有尝试过，但你也可以用哈希做类似的事情。