如何在 React-Router 4 <Switch><Redirect> 中保留查询字符串和哈希片段? [英] How preserve query string and hash fragment, in React-Router 4 <Switch><Redirect>?

问题描述

如果您在 中有一个 ，您将获得一个 location 并且可以执行以下操作:<代码><重定向搜索={props.location.search} hash={props.location.hash} ....

If you have a <Redirect> inside a <Route>, you'll get a location and can do: <Redirect search={props.location.search} hash={props.location.hash} ....

然而，当直接在顶级 中时， 没有任何 props.location访问 search 和 hash.

However, when directly inside a top level <Switch>, the <Redirect> doesn't have any props.location to access search and hash on.

有没有办法直接在顶级之后的中保留查询字符串和哈希片段(没有<Route> 在树的更高处)?

Is there no way to preserve the query string and hash fragment, in a <Redirect> directly after a top level <Switch> (no <Route> higher up in the tree)?

示例:(打字稿)

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

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

Changing to: '/latest' to to: { pathname:... search:.. hash:.. } doesn't work because there's no props.location available to access the original .search and .hash on.

这里(https://github.com/ReactTraining/react-router/issues/5818#issuecomment-384934176 )开发人员说保留查询和哈希问题已经解决，但我找不到任何适用于上述情况的内容:

Here (https://github.com/ReactTraining/react-router/issues/5818#issuecomment-384934176 ) the devs says the preserve-query-and-hash problem has been solved but I cannot find anything that works in the above case:

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

> any option the save query string on redirect?

> 将在 4.3.0 中实现.请参阅此处的发行说明:https://github.com/ReactTraining/react-router/releases/tag/v4.3.0-rc.1

> it will be implemented in 4.3.0. See release notes here: https://github.com/ReactTraining/react-router/releases/tag/v4.3.0-rc.1

那些发行说明链接到:https://github.com/ReactTraining/react-router/pull/5209 没有提到任何似乎有效的东西.

Those release notes links to: https://github.com/ReactTraining/react-router/pull/5209 which doesn't mention anything that seems to work.

也许它们只用于 在 中?然后，您可以执行以下操作:

Maybe they meant only for <Redirect> inside a <Route> already? Then, one can do something like:

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

推荐答案

如果没有其他方法(显然没有，请参阅 Azium 的答案)...那么这至少适用于 exact 和 strict 都是 true(尚未测试其他组合).

If there's no other way (apparently there isn't, see Azium's answer) ... then this works :- ) at least with exact and strict both true (haven't tested other combos).

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

Use like so: (and it'll change the path only, not query string or hash)

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

并在 中工作，上面没有 .里面有一个 :- P 你需要删除 dieIf.

and works in a <Switch> with no <Route> above. There's a <Route> inside instead :- P You need to remove dieIf.

执照:麻省理工学院.(不是 CC0.)

License: MIT. (Not 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 }});
  }});
}

这篇关于如何在 React-Router 4 &lt;Switch&gt;&lt;Redirect&gt; 中保留查询字符串和哈希片段?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！