Pomocou prvku react-router
môžem pomocou prvku Link
vytvárať odkazy, ktoré natívne spracúva smerovač react.
Vidím, že interne sa volá this.context.transitionTo(...)
.
Chcem urobiť navigáciu, ale nie z odkazu, ale napríklad z rozbaľovacieho výberu. Ako to môžem urobiť v kóde? Čo je to this.context
?
Videl som mixin Navigation
, ale môžem to urobiť bez mixinov?
React-Router 5.1.0+ Odpoveď (pomocou háčikov a React >16.8)
Môžete použiť nový háčik useHistory
na funkčných komponentoch a programovo navigovať:
import { useHistory } from "react-router-dom";
function HomeButton() {
let history = useHistory();
// use history.push('/some/path') here
};
React-Router 4.0.0+ Odpoveď
Vo verzii 4.0 a vyššej použite históriu ako prop vašej komponenty.
class Example extends React.Component {
// use `this.props.history.push('/some/path')` here
};
POZNÁMKA: this.props.history neexistuje v prípade, že vaša zložka nebola vykreslená pomocou <Route>
. Mali by ste použiť <Route path="..." component={VášComponent}/>
, aby ste mali this.props.history vo VašomComponent
React-Router 3.0.0+ Odpoveď
Vo verzii 3.0 a vyššej použite smerovač ako prop vašej komponenty.
class Example extends React.Component {
// use `this.props.router.push('/some/path')` here
};
React-Router 2.4.0+ Odpoveď
Vo verzii 2.4 a vyššej použite komponent vyššieho rádu, aby ste získali smerovač ako prop vášho 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+ Odpoveď
Táto verzia je spätne kompatibilná s verziou 1.x, takže nie'je potrebný Sprievodca aktualizáciou. Samotné prechádzanie príkladov by malo stačiť.
Napriek tomu, ak chcete prejsť na nový vzor, vo vnútri smerovača sa nachádza modul browserHistory, ku ktorému môžete získať prístup pomocou
import { browserHistory } from 'react-router'
Teraz máte prístup k histórii prehliadača, takže môžete robiť veci ako push, replace atď... Ako napríklad:
browserHistory.push('/some/path')
Ďalšie čítanie: Histórie a Navigácia
React-Router 1.x.x Odpoveď
Nebudem sa zaoberať podrobnosťami aktualizácie. Môžete si o tom prečítať v Sprievodcovi aktualizáciou
Hlavnou zmenou týkajúcou sa tejto otázky je zmena mixinu Navigation na History. Teraz'sa na zmenu trasy používa historyAPI prehliadača, takže odteraz budeme používať pushState()
.
Tu'je príklad s použitím mixinu:
var Example = React.createClass({
mixins: [ History ],
navigateToHelpPage () {
this.history.pushState(null, `/help`);
}
})
Všimnite si, že táto História
pochádza z projektu rackt/história. Nie zo samotného React-Router.
Ak z nejakého dôvodu nechcete používať Mixin (možno kvôli triede ES6), potom môžete k histórii, ktorú získate z routeru, pristupovať z this.props.history
. Bude prístupná len pre komponenty vykresľované vaším smerovačom. Ak ju teda chcete použiť v akýchkoľvek podriadených komponentoch, musí byť odovzdaná ako atribút prostredníctvom props
.
Viac informácií o novej verzii si môžete prečítať v ich 1.0.x dokumentácii
Tu je stránka nápovedy špeciálne o navigácii mimo vašej komponenty
Odporúča uchopiť odkaz history = createHistory()
a zavolať na ňom replaceState
.
React-Router 0.13.x Odpoveď
Dostal som sa do rovnakého problému a riešenie som našiel len pomocou mixinu Navigation, ktorý je súčasťou react-routeru.
Tu'je, ako som to urobil
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>);
}
});
Bol som schopný zavolať transitionTo()
bez potreby prístupu k .context
Alebo môžete vyskúšať efektnú ES6 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
};
React-Router-Redux
Poznámka: ak používate Redux, existuje ďalší projekt s názvom React-Router-Redux, ktorý vám poskytne reduxové väzby pre ReactRouter, pričom používa trochu rovnaký prístup, ako React-Redux.
React-Router-Redux má k dispozícii niekoľko metód, ktoré umožňujú jednoduchú navigáciu zvnútra tvorcov akcií. Tie môžu byť užitočné najmä pre ľudí, ktorí majú existujúcu architektúru v React Native a chcú využiť rovnaké vzory v React Web s minimálnou réžiou kotla.
Preskúmajte nasledujúce metódy:
push(location)
replace(location)
go(číslo)
goBack()
goForward()
Tu je príklad použitia s 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
V najnovšej verzii (v2.0.0-rc5
) je odporúčanou metódou navigácie priame tlačenie na singleton histórie. V akcii to môžete vidieť v Navigácia mimo dokumentu Components.
Príslušný úryvok:
import { browserHistory } from 'react-router';
browserHistory.push('/some/path');
Ak používate novšie API react-router, musíte využiť history
z this.props
, keď vnútri komponentov tzv:
this.props.history.push('/some/path');
Ponúka aj pushState
, ale ten je podľa zaznamenaných varovaní zastaraný.
Ak používate react-router-redux
, ponúka funkciu push
, ktorú môžete odoslať takto:
import { push } from 'react-router-redux';
this.props.dispatch(push('/some/path'));
Túto funkciu však môžete použiť len na zmenu adresy URL, nie na skutočnú navigáciu na stránku.
Upozornenie: táto odpoveď sa vzťahuje len na verzie ReactRouter pred 1.0
Túto odpoveď budem aktualizovať s prípadmi použitia 1.0.0-rc1 po!
Môžete to urobiť aj bez mixinov.
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>);
}
});
Háčik pri kontextoch spočíva v tom, že nie sú prístupné, pokiaľ v triede nedefinujete contextTypes
.
Pokiaľ ide o to, čo je kontext, je to objekt, podobne ako rekvizity, ktoré sa odovzdávajú z rodiča na dieťa, ale odovzdávajú sa implicitne, bez toho, aby ste museli rekvizity zakaždým deklarovať nanovo. Pozri https://www.tildedave.com/2014/11/15/introduction-to-contexts-in-react-js.html