Dzięki react-router
mogę używać elementu Link
do tworzenia linków, które są natywnie obsługiwane przez react router.
Widzę, że wewnętrznie wywołuje on this.context.transitionTo(...)
.
Chcę zrobić nawigację, ale nie z linku, z rozwijanego wyboru na przykład. Jak mogę to zrobić w kodzie? Czym jest this.context
?
Widziałem mixin Navigation
, ale czy mogę to zrobić bez mixinów?
React-Router 5.1.0+ Odpowiedź (używając haków i React >16.8)
Możesz użyć nowego haka useHistory
na komponentach funkcjonalnych i programowo nawigować:
import { useHistory } from "react-router-dom";
function HomeButton() {
let history = useHistory();
// use history.push('/some/path') here
};
React-Router 4.0.0+ Odpowiedź
W wersji 4.0 i wyższych, użyj historii jako rekwizytu swojego komponentu.
class Example extends React.Component {
// use `this.props.history.push('/some/path')` here
};
UWAGA: this.props.history nie istnieje w przypadku, gdy twój komponent nie został wyrenderowany przez <Route>
. Powinieneś użyć <Route path="..." component={TwójKomponent}/>
aby mieć this.props.history w TwoimKomponencie.
React-Router 3.0.0+ Odpowiedź
W wersji 3.0 i wyższych, używaj routera jako rekwizytu swojego komponentu.
class Example extends React.Component {
// use `this.props.router.push('/some/path')` here
};
React-Router 2.4.0+ Odpowiedź
W wersji 2.4 i wyższych, użyj komponentu wyższego rzędu, aby uzyskać router jako rekwizyt twojego komponentu.
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+ Odpowiedź
Ta wersja jest wstecznie kompatybilna z 1.x, więc nie ma potrzeby korzystania z przewodnika aktualizacji. Samo zapoznanie się z przykładami powinno wystarczyć.
Jeśli jednak chcesz przejść na nowy wzorzec, wewnątrz routera znajduje się moduł browserHistory, do którego można uzyskać dostęp za pomocą polecenia
import { browserHistory } from 'react-router'`.
Teraz masz dostęp do historii przeglądarki, więc możesz robić rzeczy takie jak push, replace, itp... Jak:
browserHistory.push('/some/path')
.
Dalsze czytanie: Historie i Nawigacja
React-Router 1.x.x Odpowiedź
Nie będę zagłębiał się w szczegóły aktualizacji. Możesz przeczytać o tym w Przewodniku aktualizacji
Główną zmianą dotyczącą pytania tutaj jest zmiana z Navigation mixin na History. Teraz to's używa historyAPI przeglądarki do zmiany trasy, więc będziemy używać pushState()
od teraz.
Oto przykład z użyciem Mixin:
var Example = React.createClass({
mixins: [ History ],
navigateToHelpPage () {
this.history.pushState(null, `/help`);
}
})
Zauważ, że ta Historia
pochodzi z projektu rackt/history. Nie z samego React-Routera.
Jeśli nie chcesz używać Mixina z jakiegoś powodu (być może z powodu klasy ES6), możesz uzyskać dostęp do historii, którą otrzymujesz z routera z this.props.history
. Będzie ona dostępna tylko dla komponentów renderowanych przez twój Router. Tak więc, jeśli chcesz użyć go w komponentach potomnych, musi on być przekazany jako atrybut przez props
.
Możesz przeczytać więcej o nowym wydaniu na ich 1.0.x documentation
Tutaj jest strona pomocy dotycząca nawigacji poza komponentem
Zaleca ona złapanie referencji history = createHistory()
i wywołanie replaceState
na tym.
React-Router 0.13.x Odpowiedź
Wpadłem na ten sam problem i mogłem znaleźć rozwiązanie tylko za pomocą miksinu Navigation, który jest dostarczany z react-router.
Oto'jak to zrobiłem
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>);
}
});
Byłem w stanie wywołać transitionTo()
bez potrzeby dostępu do .context
.
Lub możesz spróbować wymyślnej ES6 klasy
.
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
};
React-Router-Redux.
Uwaga: jeśli używasz Reduxa, istnieje inny projekt o nazwie React-Router-Redux, który daje ci wiązania redux dla ReactRouter, używając nieco tego samego podejścia, które React-Redux robi.
React-Router-Redux ma kilka dostępnych metod, które pozwalają na prostą nawigację z wnętrza twórców akcji. Mogą one być szczególnie przydatne dla osób, które mają istniejącą architekturę w React Native, i chcą wykorzystać te same wzorce w React Web z minimalnym narzutem kotła.
Zapoznaj się z następującymi metodami:
push(location)
replace(location)
go(liczba)
goBack()
goForward()
Oto przykład użycia, z 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>
React-Router v2.
W najnowszym wydaniu (v2.0.0-rc5
), zalecaną metodą nawigacji jest bezpośrednie pchanie do singletonu historii. Możesz zobaczyć to w akcji w Nawigacja poza komponentami doc.
Odpowiedni fragment:
import { browserHistory } from 'react-router';
browserHistory.push('/some/path');
Jeśli używasz nowszego API react-router, musisz wykorzystać history
z this.props
, gdy wewnątrz komponentów tak:
this.props.history.push('/some/path');
Oferuje on również pushState
, ale jest to już przestarzałe, jeśli chodzi o zarejestrowane ostrzeżenia.
Jeśli używasz react-router-redux
, oferuje on funkcję push
, którą możesz wysłać w ten sposób:
import { push } from 'react-router-redux';
this.props.dispatch(push('/some/path'));
Jednak może to być użyte tylko do zmiany adresu URL, a nie do faktycznej nawigacji na stronę.
Ostrzeżenie: ta odpowiedź dotyczy tylko wersji ReactRoutera przed 1.0
Będę aktualizować tę odpowiedź z 1.0.0-rc1 przypadków użycia po!
Możesz to zrobić również bez mixins.
let Authentication = React.createClass({
contextTypes: {
router: React.PropTypes.func
},
handleClick(e) {
e.preventDefault();
this.context.router.transitionTo('/');
},
render(){
return (<div onClick={this.handleClick}>Click me!</div>);
}
});
Problem z kontekstami polega na tym, że nie są one dostępne, chyba że zdefiniujesz contextTypes
na klasie.
Jeśli chodzi o to, czym jest kontekst, jest to obiekt, podobnie jak rekwizyty, które są przekazywane z rodzica na dziecko, ale jest on przekazywany niejawnie, bez konieczności ponownego deklarowania rekwizytów za każdym razem. Zobacz https://www.tildedave.com/2014/11/15/introduction-to-contexts-in-react-js.html