通过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,并在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>
    }
});

根据Mozilla的pushState文档,这似乎是pushState的工作方式,因为浏览器将状态对象保存到用户的磁盘,以便在用户重新启动浏览器后恢复它们.

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

Answer 1

状态是location这样的,你可以通过props它是你的路由组件来访问它:this.props.location.state或者获取location上下文的对象.

查看v3文档中的Pinterest示例,它正是您想要的.

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