React-Router 5.1.0+ Yanıt (kancalar ve Reaksiyon> 16.8 kullanarak)
useHistoryFonksiyonel Bileşenler üzerindeki yeni kancayı kullanabilir ve Programlı olarak gezinebilirsiniz:
import { useHistory } from "react-router-dom";
function HomeButton() {
let history = useHistory();
// use history.push('/some/path') here
};
React-Router 4.0.0+ Yanıt
4.0 ve üzeri sürümlerde, geçmişi bileşeninizin bir pervanesi olarak kullanın.
class Example extends React.Component {
// use `this.props.history.push('/some/path')` here
};
NOT: this.props.history, bileşeninizin oluşturulmadığı durumda mevcut değildir <Route>. <Route path="..." component={YourComponent}/>Bileşeninizde this.props.history olması için şunu kullanmalısınız:
React-Router 3.0.0+ Yanıt
3.0 ve üzeri sürümlerde, yönlendiriciyi bileşeninizin desteği olarak kullanın.
class Example extends React.Component {
// use `this.props.router.push('/some/path')` here
};
React-Router 2.4.0 ve üzeri Yanıt
2.4 ve üzeri sürümlerde, yönlendiriciyi bileşeninizin bir pervanesi olarak almak için daha yüksek bir sipariş bileşeni kullanın.
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 ve üzeri Yanıt
Bu sürüm 1.x ile geriye dönük olarak uyumludur, bu nedenle Yükseltme Kılavuzu'na gerek yoktur. Sadece örnekleri incelemek yeterince iyi olmalı.
Bununla birlikte, yeni desene geçmek isterseniz, yönlendiricinin içinde erişebileceğiniz bir tarayıcıHarika modülü vardır.
import { browserHistory } from 'react-router'
Artık tarayıcı geçmişinize erişebiliyorsunuz, böylece itme, değiştirme vb.
browserHistory.push('/some/path')
Daha fazla okuma:
Tarihler ve
Navigasyon
React-Router 1.xx Yanıt
Ayrıntıları yükseltmeyeceğim. Bu konuda okuyabilirsiniz konuyu Yükseltme Kılavuzu'nda
Buradaki soru ile ilgili ana değişiklik, Navigasyon mixinden Geçmişe geçiştir. Şimdi rotayı değiştirmek için tarayıcı geçmişiniAPI kullanıyor,pushState() .
İşte Mixin kullanan bir örnek:
var Example = React.createClass({
mixins: [ History ],
navigateToHelpPage () {
this.history.pushState(null, `/help`);
}
})
Bunun Historygeldiğini unutmayın raf / tarih projesinden . React-Router'ın kendisinden değil.
Herhangi bir nedenden dolayı (belki de ES6 sınıfı nedeniyle) Mixin'i kullanmak istemiyorsanız, yönlendiriciden aldığınız geçmişe erişebilirsiniz. this.props.history . Yalnızca Yönlendiriciniz tarafından oluşturulan bileşenler için erişilebilir olacaktır. Bu nedenle, herhangi bir alt bileşende kullanmak istiyorsanız, bir özellik olarak geçirilmesi gerekir props.
Yeni sürüm hakkında daha fazla bilgiyi şu adreste bulabilirsiniz: 1.0.x belgelerinde
Burada özellikle bileşeninizin dışına gitmeyle ilgili bir yardım sayfası
Bir referans almanızı history = createHistory()ve bunu çağırmanızı önerir replaceState.
React-Router 0.13.x Yanıt
Aynı sorunu yaşadım ve sadece tepki yönlendiriciyle birlikte gelen Navigasyon mixin ile çözüm bulabildim.
İşte böyle yaptım
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>);
}
});
Erişmeye transitionTo()gerek kalmadan arayabiliyordum.context
Veya süslü ES6'yı deneyebilirsiniz 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
};
Tepki-Yönlendirici-Redux
Not: Redux kullanıyorsanız, React-Redux ile aynı yaklaşımı kullanarak ReactRouter için redux bağları veren React-Router-Redux adlı başka bir proje
daha
var
React-Router-Redux, eylem oluşturucuların içinden kolayca gezinmenizi sağlayan birkaç yöntem sunar. Bunlar, React Native'de mevcut mimariye sahip insanlar için özellikle yararlı olabilir ve React Web'de aynı kalıpları minimum kaynama ek yükü ile kullanmak isterler.
Aşağıdaki yöntemleri keşfedin:
push(location)replace(location)go(number)goBack()goForward()
Redux-Thunk ile örnek bir kullanım :
./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>