¿Cómo obtener el historial en react-router v4?

Tengo un pequeño problema al migrar de React-Router v3 a v4. en v3 pude hacer esto en cualquier lugar:

import { browserHistory } from 'react-router';
browserHistory.push('/some/path');

¿Cómo logro esto en v4.

Sé que me vendría bien, el hocico withRouter , el contexto de reacción o los accesorios del enrutador de eventos cuando estás en un componente. pero no es el caso para mí.

Estoy buscando la equivalencia de NavigatingOutsideOfComponents en v4

Solo necesita tener un módulo que exporte un history objeto. Luego, importaría ese objeto a lo largo de su proyecto.

// history.js
import { createBrowserHistory } from 'history'

export default createBrowserHistory({
  /* pass a configuration object here if needed */
})

Luego, en lugar de usar uno de los enrutadores integrados, usaría el <Router>componente.

// index.js
import { Router } from 'react-router-dom'
import history from './history'
import App from './App'

ReactDOM.render((
  <Router history={history}>
    <App />
  </Router>
), holder)

// some-other-file.js
import history from './history'
history.push('/go-here')

¡Esto funciona! https://reacttraining.com/react-router/web/api/withRouter

import { withRouter } from 'react-router-dom';

class MyComponent extends React.Component {
  render () {
    this.props.history;
  }
}

withRouter(MyComponent);

De manera similar a la respuesta aceptada, lo que podría hacer es usar reacty él react-routermismo para proporcionarle un historyobjeto que puede incluir en un archivo y luego exportarlo.

history.js

import React from 'react';
import { withRouter } from 'react-router';

// variable which will point to react-router history
let globalHistory = null;

// component which we will mount on top of the app
class Spy extends React.Component {
  constructor(props) {
    super(props)
    globalHistory = props.history; 
  }

  componentDidUpdate() {
    globalHistory = this.props.history;
  }

  render(){
    return null;
  }
}

export const GlobalHistory = withRouter(Spy);

// export react-router history
export default function getHistory() {    
  return globalHistory;
}

Luego, importa el Componente y lo monta para inicializar la variable del historial:

import { BrowserRouter } from 'react-router-dom';
import { GlobalHistory } from './history';

function render() {
  ReactDOM.render(
    <BrowserRouter>
        <div>
            <GlobalHistory />
            //.....
        </div>
    </BrowserRouter>
    document.getElementById('app'),
  );
}

Y luego puede importar en su aplicación cuando se haya montado:

import getHistory from './history'; 

export const goToPage = () => (dispatch) => {
  dispatch({ type: GO_TO_SUCCESS_PAGE });
  getHistory().push('/success'); // at this point component probably has been mounted and we can safely get `history`
};

Incluso hice un paquete npm que hace precisamente eso.

Si está usando redux y redux-thunk, la mejor solución será usar react-router-redux

// then, in redux actions for example
import { push } from 'react-router-redux'

dispatch(push('/some/path'))

Es importante ver los documentos para realizar algunas configuraciones.

Basándose en esta respuesta, si necesita un objeto de historial solo para navegar a otro componente:

import { useHistory } from "react-router-dom";

function HomeButton() {
  const history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}

En App.js

 import {useHistory } from "react-router-dom";

 const TheContext = React.createContext(null);

 const App = () => {
   const history = useHistory();

   <TheContext.Provider value={{ history, user }}>

    <Switch>
        <Route exact path="/" render={(props) => <Home {...props} />} />
        <Route
          exact
          path="/sign-up"
          render={(props) => <SignUp {...props} setUser={setUser} />}
        /> ...

Luego, en un componente hijo:

const Welcome = () => {
    
    const {user, history} = React.useContext(TheContext); 
    ....

En el caso específico de react-router, el uso contextes un escenario de caso válido, p. Ej.

class MyComponent extends React.Component {
  props: PropsType;

  static contextTypes = {
    router: PropTypes.object
  };

  render () {
    this.context.router;
  }
}

Puede acceder a una instancia del historial a través del contexto del enrutador, por ejemplo this.context.router.history.