__react-router/v4__Wie in BrowserRouter auf die Verlaufsinstanz zugreifen?

Question

Ich möchte eine Redux-Middleware schreiben Geschichte pressState in einem React-Router v4-Anwendung behandeln.

Das Problem ist, dass ich nicht einfach in BrowserRouter auf korrekte Instanz von history zugreifen kann, wie es in BrowserRouter über createHistory erstellt wurde.

Meine Frage: Gibt es eine einfache Möglichkeit, history Singleton zu BrowserRouter-Komponente zu übergeben?

Wie auch immer, dieses Beispiel funktioniert nicht mehr.

https://github.com/ReactTraining/react-router/blob/7f6706dab4827afc1c26a58418f8ef8c8ab40125/website/examples/Redux.js

Answer 1

In der aktuellen Alpha-Version gibt es keinen gut Weg, dies zu tun. Es gibt Problemumgehungen, die entweder Ihre eigene <___Router>-Komponente erstellen oder auf die history-Methoden über die context.router-Variable zugreifen (und diese an Ihre Aktion weitergeben, damit sie von Ihrer Middleware verwendet werden kann).

In der kommenden Beta haben Sie die Möglichkeit, eine history Instanz zu erstellen und an eine <Router> zu übergeben, mit der Sie die Navigation außerhalb der Komponenten durchführen können.

// history.js 
import { createHistory } from 'history' 
export default createHistory() 

// index.js 
import history from './history' 
render((
    <Router history={history}> 
    <App /> 
    </Router> 
), holder) 

// middleware.js 
import history from './history' 
export default store => dispatch => action => { 
    if (action.type === 'ROUTING_ACTION') { 
    history.push('/new_location') 
    } 
} 

Answer 2

ich vorübergehend dieses Problem gelöst, das nehme ich an mit reagieren-Router v4 passiert (ich habe auch-Router-dom reagieren), etwa so:.

Vorbei an die Geschichte Objekt aus der Komponente (Selektor) als Argument für den Schöpfer Aktion und dann in der Definition Berufung history.push Aktion Schöpfer (‚/ new-Route‘)

export function register(user, history) { 
// this history is the argument from the register call in the component 
    return function (dispatch) { 
     dispatch(initRequest()); // show spinner or something 
     return Auth.register(user) 
      .then(()=> { 
       dispatch(registerSuccess()); 
       history.push('/new-route'); 

     }).catch((err)=> dispatch(setErrorMessage())) 
    } 
} 

auch muss ich darauf hinweisen, dass createHistory nicht für mich arbeiten, ich hatte zu tun :

import createBrowserHistory from 'history/createBrowserHistory' 
const history = createBrowserHistory();