未在React路由器v5中传递状态

Question

在React Router v5中执行Redirect时，路径名将正常工作，但附加的state属性在目标组件中始终是未定义的。

我使用默认的React Router SSR设置，如下所示：https://reacttraining.com/react-router/web/guides/server-rendering/putting-it-all-together

我不确定这是不是一个SSR错误，我需要向SSR添加一些东西，或者有一些东西我应该添加到重定向的to对象中。

ClientSource.js

<Redirect from={from} to={{ pathname: path, state: { data } }} />;

ClientTarget.js

const TargetComponentContainer = ({ location }) => ( console.log(location) );
...
export default withRouter(CampaignPageContainer);

Route.js

<Route path="/:slug/:container" exact render={props => <TargetComponentContainer {...props} />} />

实际上没有错误，当我使用this.props.location.state访问重定向目标上的状态时，它是undefined。

我很感谢任何人的帮助。

Answer 1

是的，你是对的。状态不能通过。

解决方案

你可以在search.There中添加参数，这是一个对你很有用的包。包名是query-string。

yarn add query-string
or
npm i query-string

如何使用？

import queryString from 'query-string';
const params = queryString.parse(window.location.search);

参数将显示为对象。

eg: /detail?id=123456&name=fred

在parsing.You可以像这样得到它之后。

{
  id: '123456',
  name: 'fred'
}

查看有关query-string的更多接口