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

Question

如果你有一个 <Redirect>在 <Route> 里面，你会得到一个 location并且可以做:<Redirect search={props.location.search} hash={props.location.hash} ... .

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

有没有办法在 <Redirect> 中保留查询字符串和散列片段？直接在顶层之后 <Switch> (没有 <Route> 在树的更高处)？

示例:( typescript )

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

改变 to: '/latest'至 to: { pathname:... search:.. hash:.. }不起作用，因为没有 props.location可访问原件.search和 .hash上。

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

> any option the save query string on redirect?

> 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其中没有提到任何似乎有效的东西。

也许他们只意味着 <Redirect>在 <Route> 里面已经？然后，可以执行以下操作:

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 .. 
}) />