Stato di inoltro tramite this.history.pushState()

Question

Sto utilizzando react-router 1.0 e la loro integrazione della cronologia.

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

che sto tentando di rimuovere gli ID dalla nostra API e l'URL e passare il link sé creare da HATEOAS in un oggetto JSON. Vorrei passare i dati tramite il parametro di stato pushState.

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

Ma quando tento di ottenere lo stato non viene passato.

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

Sembra questo è il modo pushState era destinato a lavorare secondo Mozilla's pushState documentation perché il browser salva oggetti di stato al rigido dell'utente in modo che possano essere ripristinati dopo che l'utente riavvia il browser.

Qualcuno sa come o se posso passare i dati allo stato o se c'è un modo migliore per farlo?

Answer 1

Lo stato è il location modo, è possibile accedervi tramite props se è il componente percorso: this.props.location.state o ottenere l'oggetto del contesto location.

Dai un'occhiata a Pinterest example nella documentazione di v3, che sta facendo esattamente quello che vuoi.

edit: Ecco il link per l'esempio in React router v4: https://reacttraining.com/react-router/web/example/modal-gallery