Bagaimana cara mendapatkan riwayat di react-router v4?

Saya mengalami sedikit masalah saat bermigrasi dari React-Router v3 ke v4. di v3 saya bisa melakukan ini di mana saja:

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

Bagaimana cara mencapai ini di v4.

Saya tahu bahwa saya dapat menggunakan, hoc withRouter, konteks reaksi, atau alat peraga router acara ketika Anda berada dalam sebuah Komponen. tetapi tidak demikian halnya bagi saya.

Saya mencari kesetaraan NavigatingOutsideOfComponents di v4

Anda hanya perlu memiliki modul yang mengekspor historyobjek. Kemudian Anda akan mengimpor objek itu ke seluruh proyek Anda.

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

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

Kemudian, alih-alih menggunakan salah satu router internal, Anda akan menggunakan <Router>komponen.

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

Ini bekerja! 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);

Mirip dengan jawaban yang diterima, apa yang dapat Anda lakukan adalah menggunakan reactdan react-routeritu sendiri untuk memberi Anda historyobjek yang dapat Anda lingkupi dalam file dan kemudian ekspor.

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

Anda kemudian mengimpor Komponen dan memasang untuk menginisialisasi variabel riwayat:

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

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

Dan kemudian Anda bisa mengimpor aplikasi Anda ketika sudah terpasang:

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

Saya bahkan membuat dan paket npm yang melakukan hal itu.

Jika Anda menggunakan redux dan redux-thunk, solusi terbaik adalah menggunakan react-router-redux

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

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

Penting untuk melihat dokumen untuk melakukan beberapa konfigurasi.

Mendasarkan pada jawaban ini jika Anda memerlukan objek sejarah hanya untuk menavigasi ke komponen lain:

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

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

Kemudian di komponen anak:

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

Dalam kasus khusus react-router, menggunakan contextadalah skenario kasus yang valid, misalnya

class MyComponent extends React.Component {
  props: PropsType;

  static contextTypes = {
    router: PropTypes.object
  };

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

Anda dapat mengakses sebuah instance dari sejarah melalui konteks router, mis this.context.router.history.