Bagaimana cara mendorong ke History di React Router v4?

Dalam versi React Router (v3) saat ini, saya dapat menerima respons server dan gunakan browserHistory.pushuntuk membuka halaman respons yang sesuai. Namun, ini tidak tersedia di v4, dan saya tidak yakin apa cara yang tepat untuk menangani ini.

Dalam contoh ini, menggunakan Redux, komponen / app-product-form.js panggilan this.props.addProduct(props)saat pengguna mengirimkan formulir. Ketika server mengembalikan sukses, pengguna dibawa ke halaman Cart.

// actions/index.js
export function addProduct(props) {
  return dispatch =>
    axios.post(`${ROOT_URL}/cart`, props, config)
      .then(response => {
        dispatch({ type: types.AUTH_USER });
        localStorage.setItem('token', response.data.token);
        browserHistory.push('/cart'); // no longer in React Router V4
      });
}

Bagaimana saya bisa membuat redirect ke halaman Cart dari fungsi untuk React Router v4?

Anda dapat menggunakan historymetode di luar komponen Anda. Coba dengan cara berikut.

Pertama, buat historyobjek menggunakan paket histori :

// src/history.js

import { createBrowserHistory } from 'history';

export default createBrowserHistory();

Kemudian bungkus <Router>( harap dicatat , Anda harus menggunakannya import { Router }sebagai gantinya import { BrowserRouter as Router }):

// src/index.jsx

// ...
import { Router, Route, Link } from 'react-router-dom';
import history from './history';

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <div>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/login">Login</Link></li>
        </ul>
        <Route exact path="/" component={HomePage} />
        <Route path="/login" component={LoginPage} />
      </div>
    </Router>
  </Provider>,
  document.getElementById('root'),
);

Ubah lokasi Anda saat ini dari tempat mana pun, misalnya:

// src/actions/userActionCreators.js

// ...
import history from '../history';

export function login(credentials) {
  return function (dispatch) {
    return loginRemotely(credentials)
      .then((response) => {
        // ...
        history.push('/');
      });
  };
}

UPD : Anda juga dapat melihat contoh yang sedikit berbeda di React Router FAQ .

React Router v4 pada dasarnya berbeda dari v3 (dan sebelumnya) dan Anda tidak dapat melakukan browserHistory.push()seperti dulu.

Diskusi ini tampaknya terkait jika Anda ingin info lebih lanjut:

• Membuat yang baru browserHistorytidak akan berhasil karena <BrowserRouter>membuat instance riwayatnya sendiri, dan mendengarkan perubahannya. Jadi contoh yang berbeda akan mengubah url tetapi tidak memperbarui <BrowserRouter>.
• browserHistory tidak terpapar oleh react-router di v4, hanya di v2.

Alih-alih, Anda memiliki beberapa opsi untuk melakukan ini:

• Gunakan komponen withRoutertingkat tinggi

  Alih-alih, Anda harus menggunakan withRouterkomponen pesanan tinggi, dan membungkusnya dengan komponen yang akan mendorong ke sejarah. Sebagai contoh:

  import React from "react";
  import { withRouter } from "react-router-dom";
  
  class MyComponent extends React.Component {
    ...
    myFunction() {
      this.props.history.push("/some/Path");
    }
    ...
  }
  export default withRouter(MyComponent);

  Lihat dokumentasi resmi untuk info lebih lanjut:

  Anda bisa mendapatkan akses ke historyproperti obyek dan yang paling dekat <Route>'s matchmelalui withRouter komponen tingkat tinggi. withRouter akan membuat ulang komponen setiap kali rute perubahan dengan alat peraga yang sama seperti <Route>membuat alat peraga: { match, location, history }.

• Gunakan contextAPI

  Menggunakan konteks mungkin merupakan salah satu solusi termudah, tetapi karena API eksperimental itu tidak stabil dan tidak didukung. Gunakan hanya ketika semuanya gagal. Ini sebuah contoh:

  import React from "react";
  import PropTypes from "prop-types";
  
  class MyComponent extends React.Component {
    static contextTypes = {
      router: PropTypes.object
    }
    constructor(props, context) {
       super(props, context);
    }
    ...
    myFunction() {
      this.context.router.history.push("/some/Path");
    }
    ...
  }

  Lihat dokumentasi resmi tentang konteks:

  Jika Anda ingin aplikasi Anda stabil, jangan gunakan konteks. Ini adalah API eksperimental dan kemungkinan akan pecah dalam rilis React di masa depan.

  Jika Anda bersikeras menggunakan konteks meskipun ada peringatan ini, cobalah untuk mengisolasi penggunaan konteks Anda ke area kecil dan hindari menggunakan API konteks secara langsung jika memungkinkan sehingga lebih mudah untuk memutakhirkan ketika API berubah.

Sekarang dengan react-router v5 Anda dapat menggunakan hook siklus hidup useHistory seperti ini:

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

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

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

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

baca lebih lanjut di: https://reacttraining.com/react-router/web/api/Hooks/usehistory

Cara paling sederhana dalam React Router 4 adalah menggunakan

this.props.history.push('/new/url');

Tetapi untuk menggunakan metode ini, komponen Anda yang ada harus memiliki akses ke historyobjek. Kami bisa mendapatkan akses dengan

1. Jika komponen Anda terhubung Routesecara langsung, maka komponen Anda sudah memiliki akses ke historyobjek.

   misalnya:

   <Route path="/profile" component={ViewProfile}/>

   Di sini ViewProfilememiliki akses ke history.

2. Jika tidak terhubung Routelangsung.

   misalnya:

   <Route path="/users" render={() => <ViewUsers/>}

   Maka kita harus menggunakan withRouter, perintah yang lebih tinggi untuk melengkungkan komponen yang ada.

   ViewUsersKomponen di dalam

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

   • export default withRouter(ViewUsers);

   Itu saja sekarang, ViewUserskomponen Anda memiliki akses ke historyobjek.

MEMPERBARUI

2- dalam skenario ini, lewati semua rute propske komponen Anda, dan kemudian kita dapat mengakses this.props.historydari komponen bahkan tanpa aHOC

misalnya:

<Route path="/users" render={props => <ViewUsers {...props} />}

Beginilah cara saya melakukannya:

import React, {Component} from 'react';

export default class Link extends Component {
    constructor(props) {
        super(props);
        this.onLogout = this.onLogout.bind(this);
    }
    onLogout() {
        this.props.history.push('/');
    }
    render() {
        return (
            <div>
                <h1>Your Links</h1>
                <button onClick={this.onLogout}>Logout</button>
            </div>
        );
    }
}

Gunakan this.props.history.push('/cart');untuk mengarahkan ke halaman keranjang itu akan disimpan di objek sejarah.

Selamat menikmati, Michael.

Menurut dokumentasi React Router v4 - sesi Redux Deep Integration

Diperlukan integrasi yang dalam untuk:

"dapat menavigasi dengan mengirimkan tindakan"

Namun, mereka merekomendasikan pendekatan ini sebagai alternatif untuk "integrasi mendalam":

"Daripada mengirim tindakan untuk bernavigasi, Anda dapat melewati objek riwayat yang disediakan untuk merutekan komponen ke tindakan Anda dan menavigasi dengan itu di sana."

Jadi, Anda dapat membungkus komponen Anda dengan komponen pesanan tinggi withRouter:

export default withRouter(connect(null, { actionCreatorName })(ReactComponent));

yang akan meneruskan API riwayat ke alat peraga. Jadi, Anda dapat memanggil pencipta aksi yang meneruskan sejarah sebagai param. Misalnya, di dalam ReactComponent Anda:

onClick={() => {
  this.props.actionCreatorName(
    this.props.history,
    otherParams
  );
}}

Lalu, di dalam action / index.js Anda:

export function actionCreatorName(history, param) {
  return dispatch => {
    dispatch({
      type: SOME_ACTION,
      payload: param.data
    });
    history.push("/path");
  };
}

Pertanyaan jahat, butuh waktu cukup lama, tetapi akhirnya, saya menyelesaikannya dengan cara ini:

Bungkus wadah Anda dengan withRouterdan sampaikan riwayat ke tindakan Anda dalam mapDispatchToPropsfungsi. Dalam aksi gunakan history.push ('/ url') untuk bernavigasi.

Tindakan:

export function saveData(history, data) {
  fetch.post('/save', data)
     .then((response) => {
       ...
       history.push('/url');
     })
};

Wadah:

import { withRouter } from 'react-router-dom';
...
const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    save: (data) => dispatch(saveData(ownProps.history, data))}
};
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Container));

Ini berlaku untuk Bereaksi Router v4.x .

this.context.history.push tidak akan bekerja.

Saya berhasil mendapatkan kerja dorong seperti ini:

static contextTypes = {
    router: PropTypes.object
}

handleSubmit(e) {
    e.preventDefault();

    if (this.props.auth.success) {
        this.context.router.history.push("/some/Path")
    }

}

Dalam hal ini Anda memberikan properti ke thunk Anda. Jadi, Anda cukup menelepon

props.history.push('/cart')

Jika ini tidak terjadi, Anda masih dapat meneruskan riwayat dari komponen Anda

export function addProduct(data, history) {
  return dispatch => {
    axios.post('/url', data).then((response) => {
      dispatch({ type: types.AUTH_USER })
      history.push('/cart')
    })
  }
}

Saya menawarkan satu solusi lagi jika itu bermanfaat untuk orang lain.

Saya memiliki history.jsfile di mana saya memiliki yang berikut ini:

import createHistory from 'history/createBrowserHistory'
const history = createHistory()
history.pushLater = (...args) => setImmediate(() => history.push(...args))
export default history

Selanjutnya, pada Root saya di mana saya mendefinisikan router saya, saya menggunakan yang berikut ini:

import history from '../history'
import { Provider } from 'react-redux'
import { Router, Route, Switch } from 'react-router-dom'

export default class Root extends React.Component {
  render() {
    return (
     <Provider store={store}>
      <Router history={history}>
       <Switch>
        ...
       </Switch>
      </Router>
     </Provider>
    )
   }
  }

Akhirnya, pada saya actions.jsmengimpor History dan memanfaatkan pushLater

import history from './history'
export const login = createAction(
...
history.pushLater({ pathname: PATH_REDIRECT_LOGIN })
...)

Dengan cara ini, saya dapat mendorong ke tindakan baru setelah panggilan API.

Semoga ini bisa membantu!

Jika Anda menggunakan Redux, maka saya akan merekomendasikan menggunakan paket npm react-router-redux . Ini memungkinkan Anda untuk mengirim tindakan navigasi toko Redux.

Anda harus membuat toko seperti yang dijelaskan dalam file Readme mereka .

Kasing penggunaan termudah:

import { push } from 'react-router-redux'

this.props.dispatch(push('/second page'));

Kasus penggunaan kedua dengan Wadah / Komponen:

Wadah:

import { connect } from 'react-redux';
import { push } from 'react-router-redux';

import Form from '../components/Form';

const mapDispatchToProps = dispatch => ({
  changeUrl: url => dispatch(push(url)),
});

export default connect(null, mapDispatchToProps)(Form);

Komponen:

import React, { Component } from 'react';
import PropTypes from 'prop-types';

export default class Form extends Component {
  handleClick = () => {
    this.props.changeUrl('/secondPage');
  };

  render() {
    return (
      <div>
        <button onClick={this.handleClick}/>
      </div>Readme file
    );
  }
}

Saya bisa mencapai ini dengan menggunakan bind(). Saya ingin mengklik tombol di index.jsx, memposting beberapa data ke server, mengevaluasi respons, dan mengarahkan ke success.jsx. Begini cara saya mengatasinya ...

index.jsx:

import React, { Component } from "react"
import { postData } from "../../scripts/request"

class Main extends Component {
    constructor(props) {
        super(props)
        this.handleClick = this.handleClick.bind(this)
        this.postData = postData.bind(this)
    }

    handleClick() {
        const data = {
            "first_name": "Test",
            "last_name": "Guy",
            "email": "[email protected]"
        }

        this.postData("person", data)
    }

    render() {
        return (
            <div className="Main">
                <button onClick={this.handleClick}>Test Post</button>
            </div>
        )
    }
}

export default Main

request.js:

import { post } from "./fetch"

export const postData = function(url, data) {
    // post is a fetch() in another script...
    post(url, data)
        .then((result) => {
            if (result.status === "ok") {
                this.props.history.push("/success")
            }
        })
}

success.jsx:

import React from "react"

const Success = () => {
    return (
        <div className="Success">
            Hey cool, got it.
        </div>
    )
}

export default Success

Jadi dengan mengikat thiske postDatadalam index.jsx, saya bisa akses this.props.historydi request.js... maka saya bisa menggunakan kembali fungsi ini dalam komponen yang berbeda, hanya untuk memastikan aku ingat untuk menyertakan this.postData = postData.bind(this)dalam constructor().

Inilah hack saya (ini adalah file level root saya, dengan sedikit redux yang tercampur di sana - meskipun saya tidak menggunakan react-router-redux):

const store = configureStore()
const customHistory = createBrowserHistory({
  basename: config.urlBasename || ''
})

ReactDOM.render(
  <Provider store={store}>
    <Router history={customHistory}>
      <Route component={({history}) => {
        window.appHistory = history
        return (
          <App />
        )
      }}/>
    </Router>
  </Provider>,
  document.getElementById('root')
)

Saya kemudian dapat menggunakan di window.appHistory.push()mana saja saya inginkan (misalnya, di fungsi toko redux saya / thunks / sagas, dll) saya berharap saya hanya bisa menggunakan window.customHistory.push()tetapi untuk beberapa alasan react-routersepertinya tidak pernah memperbarui meskipun url berubah. Tapi dengan cara ini saya react-routermenggunakan instance EXACT . Saya tidak suka meletakkan barang-barang di lingkup global, dan ini adalah salah satu dari beberapa hal yang saya lakukan dengan itu. Tapi ini lebih baik daripada alternatif lain yang pernah saya lihat IMO.

Gunakan Callback. Itu berhasil untuk saya!

export function addProduct(props, callback) {
  return dispatch =>
    axios.post(`${ROOT_URL}/cart`, props, config)
    .then(response => {
    dispatch({ type: types.AUTH_USER });
    localStorage.setItem('token', response.data.token);
    callback();
  });
}

Dalam komponen, Anda hanya perlu menambahkan callback

this.props.addProduct(props, () => this.props.history.push('/cart'))

jadi cara saya melakukannya adalah: - Alih-alih mengarahkan ulang menggunakan history.push, saya hanya menggunakan Redirectkomponen dari react-router-dom Ketika menggunakan komponen ini Anda hanya dapat lulus push=true, dan itu akan mengurus sisanya

import * as React from 'react';
import { Redirect } from 'react-router-dom';
class Example extends React.Component {
  componentDidMount() {
    this.setState({
      redirectTo: '/test/path'
    });
  }

  render() {
    const { redirectTo } = this.state;

    return <Redirect to={{pathname: redirectTo}} push={true}/>
  }
}

React router V4 sekarang memungkinkan prop sejarah untuk digunakan seperti di bawah ini:

this.props.history.push("/dummy",value)

Nilai tersebut kemudian dapat diakses di mana pun prop lokasi tersedia sebagai state:{value}bukan komponen.

Anda dapat menggunakannya seperti ini karena saya melakukannya untuk login dan manny hal yang berbeda

class Login extends Component {
  constructor(props){
    super(props);
    this.login=this.login.bind(this)
  }


  login(){
this.props.history.push('/dashboard');
  }


render() {

    return (

   <div>
    <button onClick={this.login}>login</login>
    </div>

)

/*Step 1*/
myFunction(){  this.props.history.push("/home"); }
/**/
 <button onClick={()=>this.myFunction()} className={'btn btn-primary'}>Go 
 Home</button>

langkah pertama bungkus aplikasi Anda di Router

import { BrowserRouter as Router } from "react-router-dom";
ReactDOM.render(<Router><App /></Router>, document.getElementById('root'));

Sekarang seluruh Aplikasi saya akan memiliki akses ke BrowserRouter. Langkah kedua saya mengimpor Rute dan kemudian menurunkan alat peraga itu. Mungkin di salah satu file utama Anda.

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

//lots of code here

//somewhere in my render function

    <Route
      exact
      path="/" //put what your file path is here
      render={props => (
      <div>
        <NameOfComponent
          {...props} //this will pass down your match, history, location objects
        />
      </div>
      )}
    />

Sekarang jika saya menjalankan console.log (this.props) di file js komponen saya bahwa saya harus mendapatkan sesuatu yang terlihat seperti ini

{match: {…}, location: {…}, history: {…}, //other stuff }

Langkah 2 Saya dapat mengakses objek riwayat untuk mengubah lokasi saya

//lots of code here relating to my whatever request I just ran delete, put so on

this.props.history.push("/") // then put in whatever url you want to go to

Saya juga hanya seorang mahasiswa coding bootcamp, jadi saya bukan ahli, tapi saya tahu Anda juga bisa menggunakannya

window.location = "/" //wherever you want to go

Koreksi saya jika saya salah, tetapi ketika saya mengujinya itu memuat ulang seluruh halaman yang saya pikir mengalahkan seluruh titik menggunakan Bereaksi.

Buat custom Routerdengan sendiri browserHistory:

import React from 'react';
import { Router } from 'react-router-dom';
import { createBrowserHistory } from 'history';

export const history = createBrowserHistory();

const ExtBrowserRouter = ({children}) => (
  <Router history={history} >
  { children }
  </Router>
);

export default ExtBrowserRouter

Selanjutnya, pada Root Anda di mana Anda mendefinisikan Anda Router, gunakan yang berikut:

import React from 'react';       
import { /*BrowserRouter,*/ Route, Switch, Redirect } from 'react-router-dom';

//Use 'ExtBrowserRouter' instead of 'BrowserRouter'
import ExtBrowserRouter from './ExtBrowserRouter'; 
...

export default class Root extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <ExtBrowserRouter>
          <Switch>
            ...
            <Route path="/login" component={Login}  />
            ...
          </Switch>
        </ExtBrowserRouter>
      </Provider>
    )
  }
}

Terakhir, impor di historymana Anda membutuhkannya dan gunakan:

import { history } from '../routers/ExtBrowserRouter';
...

export function logout(){
  clearTokens();      
  history.push('/login'); //WORKS AS EXPECTED!
  return Promise.reject('Refresh token has expired');
}

Jika Anda ingin menggunakan histori sambil meneruskan fungsi sebagai nilai ke prop Component, dengan react-router 4 Anda bisa menghancurkan struktur historyprop dalam atribut render dari <Route/>Component dan kemudian menggunakanhistory.push()

    <Route path='/create' render={({history}) => (
      <YourComponent
        YourProp={() => {
          this.YourClassMethod()
          history.push('/')
        }}>
      </YourComponent>
    )} />

Catatan: Agar ini berfungsi, Anda harus membungkus Komponen BrowserRouter React Router di sekitar komponen root Anda (mis. Yang mungkin ada di index.js)