React-Router 5.1.0+ Answer (menggunakan kait dan Bereaksi> 16.8)
Anda dapat menggunakan useHistorypengait baru pada Komponen Fungsional dan secara terprogram menavigasi:
import { useHistory } from "react-router-dom";
function HomeButton() {
let history = useHistory();
// use history.push('/some/path') here
};
React-Router 4.0.0+ Jawab
Di 4.0 dan di atas, gunakan riwayat sebagai penyangga komponen Anda.
class Example extends React.Component {
// use `this.props.history.push('/some/path')` here
};
CATATAN: this.props.history tidak ada jika komponen Anda tidak dirender oleh <Route>. Anda harus menggunakannya <Route path="..." component={YourComponent}/>untuk memiliki this.props.history di YourComponent
React-Router 3.0.0+ Jawab
Di 3.0 dan di atas, gunakan router sebagai penyangga komponen Anda.
class Example extends React.Component {
// use `this.props.router.push('/some/path')` here
};
React-Router 2.4.0+ Jawab
Di 2.4 dan di atas, gunakan komponen urutan yang lebih tinggi untuk mendapatkan router sebagai penyangga komponen Anda.
import { withRouter } from 'react-router';
class Example extends React.Component {
// use `this.props.router.push('/some/path')` here
};
// Export the decorated class
var DecoratedExample = withRouter(Example);
// PropTypes
Example.propTypes = {
router: React.PropTypes.shape({
push: React.PropTypes.func.isRequired
}).isRequired
};
React-Router 2.0.0+ Jawab
Versi ini kompatibel dengan 1.x sehingga tidak perlu Panduan Upgrade. Hanya melalui contoh-contoh harus cukup baik.
Yang mengatakan, jika Anda ingin beralih ke pola baru, ada modul browserHistory di dalam router yang dapat Anda akses
import { browserHistory } from 'react-router'
Sekarang Anda memiliki akses ke riwayat browser Anda, sehingga Anda dapat melakukan hal-hal seperti mendorong, mengganti, dll ... Seperti:
browserHistory.push('/some/path')
Bacaan lebih lanjut:
Sejarah dan
Navigasi
React-Router 1.xx Jawab
Saya tidak akan masuk ke detail pemutakhiran. Anda dapat membaca tentang itu di Panduan Upgrade
Perubahan utama tentang pertanyaan di sini adalah perubahan dari Navigasi mixin ke Riwayat. Sekarang ia menggunakan histori browserAPI untuk mengubah rute sehingga kami akan menggunakannyapushState() mulai sekarang.
Inilah contoh menggunakan Mixin:
var Example = React.createClass({
mixins: [ History ],
navigateToHelpPage () {
this.history.pushState(null, `/help`);
}
})
Perhatikan bahwa ini Historyberasal dari rackt / history proyek . Bukan dari React-Router itu sendiri.
Jika Anda tidak ingin menggunakan Mixin karena alasan tertentu (mungkin karena kelas ES6), maka Anda dapat mengakses riwayat yang Anda peroleh dari router this.props.history. Ini hanya akan dapat diakses untuk komponen yang diberikan oleh Router Anda. Jadi, jika Anda ingin menggunakannya dalam komponen anak apa pun, harus diturunkan sebagai atribut melaluiprops .
Anda dapat membaca lebih lanjut tentang rilis baru di mereka dokumentasi 1.0.x
Disini adalah halaman bantuan khusus tentang navigasi di luar komponen Anda
Ini merekomendasikan mengambil referensi history = createHistory()dan memanggilnya replaceState.
React-Router 0.13.x Jawab
Saya masuk ke masalah yang sama dan hanya bisa menemukan solusi dengan mixin Navigasi yang datang dengan router reaksi.
Begini cara saya melakukannya
import React from 'react';
import {Navigation} from 'react-router';
let Authentication = React.createClass({
mixins: [Navigation],
handleClick(e) {
e.preventDefault();
this.transitionTo('/');
},
render(){
return (<div onClick={this.handleClick}>Click me!</div>);
}
});
Saya bisa menelepon transitionTo() tanpa perlu mengakses.context
Atau Anda bisa mencoba ES6 mewah class
import React from 'react';
export default class Authentication extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick(e) {
e.preventDefault();
this.context.router.transitionTo('/');
}
render(){
return (<div onClick={this.handleClick}>Click me!</div>);
}
}
Authentication.contextTypes = {
router: React.PropTypes.func.isRequired
};
Bereaksi-Router-Redux
Catatan: jika Anda menggunakan Redux, ada proyek lain yang disebut
ReactRouter-Redux yang memberikan Redux binding untuk ReactRouter, menggunakan agak pendekatan yang sama yang
Bereaksi-Redux tidak
React-Router-Redux memiliki beberapa metode yang tersedia yang memungkinkan untuk navigasi sederhana dari pembuat aksi dalam. Ini dapat sangat berguna bagi orang-orang yang memiliki arsitektur di React Native, dan mereka ingin memanfaatkan pola yang sama di React Web dengan overhead boilerplate yang minimal.
Jelajahi metode berikut:
push(location)replace(location)go(number)goBack()goForward()
Berikut ini adalah contoh penggunaan, dengan Redux-Thunk :
./actioncreators.js
import { goBack } from 'react-router-redux'
export const onBackPress = () => (dispatch) => dispatch(goBack())
./viewcomponent.js
<button
disabled={submitting}
className="cancel_button"
onClick={(e) => {
e.preventDefault()
this.props.onBackPress()
}}
>
CANCEL
</button>