react-router - 通过 this.history.pushState() 传递状态

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，并传递由 HATEOAS 创建的自我链接在 JSON 对象中。
我想通过 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>
    }
});

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

有谁知道我如何或是否可以将数据传递给状态，或者是否有更好的方法来做到这一点？

Answer 1

状态为 location因此，您可以通过 props 访问它如果是你的路由组件:this.props.location.state或获取 location上下文的对象。

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

编辑:
这是 React Router v4 中示例的链接:
https://reacttraining.com/react-router/web/example/modal-gallery