Wie bekomme ich den Verlauf auf React-Router v4?

Ich habe ein kleines Problem bei der Migration von React-Router v3 auf v4. in v3 konnte ich das überall machen:

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

Wie erreiche ich das in v4?

Ich weiß, dass ich die Hoc- withRouter, Reaktionskontext- oder Event-Router-Requisiten verwenden kann, wenn Sie sich in einer Komponente befinden. aber das ist bei mir nicht der Fall.

Ich suche nach der Äquivalenz von NavigatingOutsideOfComponents in v4

Sie benötigen lediglich ein Modul, das ein historyObjekt exportiert . Dann würden Sie dieses Objekt in Ihr Projekt importieren.

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

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

Anstatt einen der integrierten Router zu verwenden, würden Sie dann die <Router>Komponente verwenden.

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

Das funktioniert! 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);

Similiary zu akzeptierte Antwort , was Sie tun können , Gebrauch ist reactund react-routersich um Ihnen historyObjekt , das Sie Rahmen in einer Datei kann und dann den Export.

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

Sie importieren später die Komponente und hängen sie ein, um die Verlaufsvariable zu initialisieren:

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

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

Und dann können Sie einfach in Ihre App importieren, wenn sie gemountet wurde:

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

Ich habe sogar ein npm-Paket gemacht , das genau das tut.

Wenn Sie Redux und Redux-Thunk verwenden, ist die beste Lösung die Verwendung von React-Router-Redux

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

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

Es ist wichtig, die Dokumente zu sehen, um einige Konfigurationen durchzuführen.

Basierend auf dieser Antwort, wenn Sie nur ein Verlaufsobjekt benötigen, um zu einer anderen Komponente zu navigieren:

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

In 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} />}
        /> ...

Dann in einer untergeordneten Komponente:

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

Im speziellen Fall von react-routerist die Verwendung contextein gültiges Fallszenario, z

class MyComponent extends React.Component {
  props: PropsType;

  static contextTypes = {
    router: PropTypes.object
  };

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

Sie können über den Routerkontext auf eine Instanz des Verlaufs zugreifen, z this.context.router.history.