Passing state via this.history.pushState()

Question

I'm using react-router 1.0 and their integration of history.

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>
);

I'm attempting to remove IDs from our API and in the URL and pass the self link create by HATEOAS in a JSON object. I would like to pass the data via the pushState state parameter.

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

But when I attempt to get the state it's not being passed.

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>
    }
});

It seems this is the way pushState was intended to work according to Mozilla's pushState documentation because the browser saves state objects to the user's disk so they can be restored after the user restarts the browser.

Does any one know how or if I can pass data to the state or if there's a better way to do this?

Answer 1

The state is on location so, you can access it via props if it's your route component: this.props.location.state or get the location object of the context.

Check out Pinterest example in the v3 docs, which is doing exactly what you want.

edit: Here is the link to the example in React Router v4: https://reacttraining.com/react-router/web/example/modal-gallery