状态未在React Router 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

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

解决方案

您可以在搜索中添加参数。有一个包对您有用。包名称为 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

解析后就可以这样了。

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

查看更多关于query-string的api