Question

我正在使用react-router 1.0及其整合历史记录。

import { createHistory, useBasename } from 'history'

const history = useBasename(createHistory)({
    basename: '/base-path'
});

export default (
    <Router history={history}>
        <Route path="/" component={require("Template")}>
            <Route path="sub-page" component={require("SubPage")}/>
        </Route>
    </Router>
);

我正在尝试从API和URL中删除ID，并在JSON对象中传递HATEOAS创建的自我链接。我想通过pushState状态参数传递数据。

onClickEditButton(selfLinkObject) {
    this.history.pushState(selfLinkObject, "/my/url");
}

但是当我试图获得状态时，它没有被传递。

import React from "react"
import { History } from "react-router"

export default React.createClass({
    mixins: [History],
    componentDidMount() {
        console.log(this.state);
        console.log(this.history.state);
        console.log(history.state);
    },
    render() {
        <p>Check the console to see if the state is passed from the pushState(state, url, params);</p>
    }
});

这似乎是pushState按照Mozilla's pushState documentation工作的方式，因为浏览器会将状态对象保存到用户的磁盘上，以便在用户重新启动浏览器后恢复它们。

是否有人知道如何将数据传递到州或者是否有更好的方法来执行此操作？

Answer 1

状态位于location，因此，如果您的路由组件是props，则可以通过this.props.location.state访问该状态，或者获取location的{{1}}对象上下文。

在v3文档中查看Pinterest example，这正是您想要的。

修改以下是React Router v4中示例的链接： https://reacttraining.com/react-router/web/example/modal-gallery

通过this.history.pushState（）传递状态

1 个答案: