reactjs - from - react router ejemplo

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

Question

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 podría usar, el hoc 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

Answer 1

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

Answer 2

De manera similar a la respuesta aceptada, lo que puede hacer es usar el react-router react y react-router sí para proporcionarle un objeto de history que puede examinar en un archivo y luego exportar.

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 {
  componentWillMount() {
    const { history } = this.props;
    globalHistory = history; 
  }

  componentWillReceiveProps(nextProps) {
    globalHistory = nextProps.history;
  }

  render(){
    return null;
  }
}

export const GlobalHistory = withRouter(Spy);

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

Luego importa Importar componente y montar para inicializar la variable de 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 ha 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 exactamente eso.

Answer 3

En el caso específico de react-router , el uso del context es 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 .

Answer 4

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 hacer algunas configuraciones.

Answer 5

Solo necesita tener un módulo que exporte un objeto de history . Luego importarías ese objeto a lo largo de tu 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 componente <Router> .

// 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'')