Med react-router
kan jeg bruge Link
-elementet til at oprette links, som naturligt håndteres af react router.
Jeg kan se, at den internt kalder this.context.transitionTo(...)
.
Jeg vil gerne lave en navigation, men ikke fra et link, men f.eks. fra et dropdown-valg. Hvordan kan jeg gøre dette i kode? Hvad er this.context
?
Jeg så Navigation
mixin, men kan jeg gøre dette uden mixins?
React-Router 5.1.0+ Svar (ved hjælp af hooks og React >16.8)
Du kan bruge den nye useHistory
hook på funktionelle komponenter og Programmatisk navigere:
import { useHistory } from "react-router-dom";
function HomeButton() {
let history = useHistory();
// use history.push('/some/path') here
};
React-Router 4.0.0+ Svar
I 4.0 og nyere versioner skal du bruge historikken som en prop for din komponent.
class Example extends React.Component {
// use `this.props.history.push('/some/path')` here
};
BEMÆRK: this.props.history eksisterer ikke i tilfælde af, at din komponent ikke blev gengivet af <Route>
. Du skal bruge <Route path="..." component={YourComponent}/>
for at have this.props.history i YourComponent
React-Router 3.0.0+ Svar
I 3.0 og højere versioner skal du bruge routeren som en prop for din komponent.
class Example extends React.Component {
// use `this.props.router.push('/some/path')` here
};
React-Router 2.4.0+ Svar
I 2.4 og derover skal du bruge en komponent af højere orden for at få routeren som en prop af din komponent.
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+ Svar
Denne version er bagudkompatibel med 1.x, så der er ikke behov for en opgraderingsvejledning. Bare at gennemgå eksemplerne burde være godt nok.
Når det er sagt, hvis du ønsker at skifte til det nye mønster, er der et browserHistory-modul inde i routeren, som du kan få adgang til med
import { browserHistory } from 'react-router'
Nu har du adgang til din browserhistorik, så du kan gøre ting som push, replace, osv... Ligesom:
Det kan f.eks. være: browserHistory.push('/some/path')
Yderligere læsning: Histories og Navigation
React-Router 1.x.x.x Svar
Jeg vil ikke gå ind i detaljer om opgradering. Du kan læse om det i [Upgrade Guide] (https://github.com/rackt/react-router/blob/master/upgrade-guides/v1.0.0.md)
Den vigtigste ændring om spørgsmålet her er ændringen fra Navigation mixin til History. Nu bruger den browserens historyAPI til at ændre ruten, så vi vil bruge pushState()
fra nu af.
Her's et eksempel ved hjælp af Mixin:
var Example = React.createClass({
mixins: [ History ],
navigateToHelpPage () {
this.history.pushState(null, `/help`);
}
})
Bemærk, at denne History
kommer fra rackt/history projektet. Ikke fra selve React-Router.
Hvis du ikke ønsker at bruge Mixin af en eller anden grund (måske på grund af ES6-klassen), kan du få adgang til den historik, du får fra routeren, fra this.props.history
. Den vil kun være tilgængelig for de komponenter, der gengives af din router. Så hvis du vil bruge den i nogen underordnede komponenter, skal den overføres som en attribut via props
.
Du kan læse mere om den nye version på deres [1.0.x documentation] (https://github.com/rackt/react-router/tree/1.0.x/docs)
Her er en hjælpeside specifikt om at navigere uden for din komponent
Den anbefaler at tage fat i en reference history = createHistory()
og kalde replaceState
på den.
React-Router 0.13.x Svar
Jeg kom ind i det samme problem og kunne kun finde løsningen med Navigation mixin, der følger med react-router.
Her's hvordan jeg gjorde det
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>);
}
});
Jeg var i stand til at kalde transitionTo()
uden at skulle tilgå .context
Eller du kan prøve den smarte 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
Note: hvis du'bruger Redux, er der et andet projekt kaldet [React-Router-Redux] (https://github.com/reactjs/react-router-redux), der giver dig redux bindinger til ReactRouter, ved hjælp af nogenlunde den samme tilgang som React-Redux gør
React-Router-Redux har et par metoder til rådighed, der gør det muligt at navigere simpelt indefra action creators. Disse kan især være nyttige for folk, der har en eksisterende arkitektur i React Native, og som ønsker at udnytte de samme mønstre i React Web med minimal boilerplate-overhead.
Udforsk følgende metoder:
push(location)
replace(location)
go(nummer)
goBack()
goForward()
Her er et eksempel på brug med 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
I den seneste version (v2.0.0.0-rc5
) er den anbefalede navigationsmetode at skubbe direkte til historik-singletonen. Du kan se det i praksis i Navigering uden for Components doc.
Relevant uddrag:
import { browserHistory } from 'react-router';
browserHistory.push('/some/path');
Hvis du bruger den nyere react-router API, skal du gøre brug af history
fra this.props
når du er inde i komponenter så:
this.props.history.push('/some/path');
Det tilbyder også pushState
, men det er deprecated per loggede advarsler.
Hvis du bruger react-router-redux
, tilbyder den en push
-funktion, som du kan sende som følger:
import { push } from 'react-router-redux';
this.props.dispatch(push('/some/path'));
Dette kan dog kun bruges til at ændre URL'en, ikke til at navigere til siden.
Varsel: dette svar dækker kun ReactRouter-versioner før 1.0
Jeg vil opdatere dette svar med 1.0.0.0-rc1 use cases efter!
Du kan også gøre dette uden 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>);
}
});
Problemet med kontekster er, at de ikke er tilgængelige, medmindre du definerer contextTypes
på klassen.
Hvad er context? Det er et objekt, ligesom props, der overføres fra forælder til barn, men det overføres implicit, uden at props skal omdeklareres hver gang. Se https://www.tildedave.com/2014/11/15/introduction-to-contexts-in-react-js.html