Cu reacționa-router pot folosi "Link-ul" element pentru a crea link-uri care sunt nativ manipulate de a reacționa router.
Văd pe plan intern se solicită acest lucru.context.transitionTo(...)`.
Vreau să fac o navigare, dar nu de la un link, de la o verticală de selecție, de exemplu. Cum pot face acest lucru în codul? Ce este asta.contextul`?
Am văzut "Navigare" mixin, dar pot face acest lucru fără mixins?
Reacționa Router v5.1.0 cu cârlige
Există o nou `useHistory cârlig în Reacționa Router >5.1.0 dacă utilizați Reacționa >16.8.0 și componente funcționale.
import { useHistory } from "react-router-dom";
function HomeButton() {
let history = useHistory();
function handleClick() {
history.push("/home");
}
return (
<button type="button" onClick={handleClick}>
Go home
</button>
);
}
Reacționa Router v4
Cu v4 de a Reacționa Router, există trei abordări pe care le puteți lua pentru a programatice de rutare în componente.
withRouter
de ordin superior componentă.<Trecere>
Reacționează Router-ul este în mare parte un înveliș în jurul valorii de istorie
biblioteca. "istoria" se ocupă de interacțiunea cu browser-ul's fereastră.istoria
pentru tine cu browser-ul și hash istorii. Acesta oferă, de asemenea, o memorie de istorie, care este util pentru medii care nu't au o istorie la nivel mondial. Acest lucru este deosebit de util în dezvoltarea app mobil (`a reacționa-nativ) și unitate de testare cu Nod.
O "istorie" instanță are două metode pentru navigarea: "push" și "înlocuiți". Dacă te gândești la "istorie" ca o serie de locații vizitate, de tip "push" va adăuga o nouă locație pentru matrice și "înlocuiți" va înlocui locația curentă în serie cu unul nou. De obicei, veți dori să utilizați metoda "push", atunci când sunt navigarea.
În versiunile anterioare de a Reacționa Router, ai avut de a crea propria "istorie" de exemplu, dar in v4 la <BrowserRouter>
, <HashRouter> și<MemoryRouter>
componente va crea un browser, hash, și de memorie cazuri pentru tine. Reacționează Router face proprietățile și metodele de "istoria" instanță asociate cu router-ul disponibil prin intermediul context, sub router
obiect.
withRouter
de ordin superior componentăAnii withRouter
de ordin superior componentă va injecta "istoria" obiect ca un propunerii de componenta. Acest lucru vă permite pentru a accesa "push" și "înlocuiți" metode fără a fi nevoie să se ocupe de "context".
import { withRouter } from 'react-router-dom'
// this also works with react-router-native
const Button = withRouter(({ history }) => (
<button
type='button'
onClick={() => { history.push('/new-location') }}
>
Click Me!
</button>
))
<Trecere>
De <Trecere>
component e't doar pentru potrivire locații. Puteți face un traseu neumblat și întotdeauna se va potrivi locația curentă. De <Trecere>
component trece aceeași recuzită ca withRouter
, deci, va fi capabil de a accesa "istorie" metodele prin "istoria" prop.
import { Route } from 'react-router-dom'
const Button = () => (
<Route render={({ history}) => (
<button
type='button'
onClick={() => { history.push('/new-location') }}
>
Click Me!
</button>
)} />
)
Dar tu, probabil, ar trebui să nu
Ultima opțiune este una care ar trebui să utilizați doar dacă vă simțiți confortabil de lucru cu Reacționa's context model. Deși contextul este o opțiune, ar trebui subliniat faptul că contextul este un instabil API și de a Reacționa are o secțiune de Ce Să Nu Folosească Context în documentația lor. Deci, utilizați pe propriul risc!
const Button = (props, context) => (
<button
type='button'
onClick={() => {
// context.history.push === history.push
context.history.push('/new-location')
}}
>
Click Me!
</button>
)
// you need to specify the context type so that it
// is available within the component
Button.contextTypes = {
history: React.PropTypes.shape({
push: React.PropTypes.func.isRequired
})
}
1 și 2 sunt cele mai simple opțiuni pentru a pune în aplicare, atât pentru cele mai multe cazuri de utilizare, acestea sunt cele mai bune pariuri.
În plus, puteți obține mai multe cunoștințe din linkurile de mai jos despre Rutare, Parametrii URL și Imbricate de rutare.
URL Parametri cu Reacționa Router
Imbricate Rute în Reacționa JS
Sper că acest lucru vă va ajuta!
Reacționa-Router 5.1.0+ Răspuns (folosind cârlige și de a Reacționa >16.8)
Puteți utiliza noul `useHistory cârlig pe Componente Funcționale și Programatic naviga:
import { useHistory } from "react-router-dom";
function HomeButton() {
let history = useHistory();
// use history.push('/some/path') here
};
Reacționa-Router 4.0.0+ Răspunde
În 4.0 și mai sus, de a folosi istoria ca un propunerii de componentă.
class Example extends React.Component {
// use `this.props.history.push('/some/path')` here
};
NOTĂ: acest lucru.elemente de recuzită.istoria nu există în cazul în care componenta dvs. nu a fost pronunțată de <Trecere>
. Ar trebui să utilizați <calea de trecere="..." component={YourComponent}/>
pentru a avea acest lucru.elemente de recuzită.istoria în YourComponent
Reacționa-Router 3.0.0+ Răspunde
În 3.0 și mai sus, folosesc router-ul ca un propunerii de componentă.
class Example extends React.Component {
// use `this.props.router.push('/some/path')` here
};
Reacționa-Router 2.4.0+ Răspunde
În 2.4 și mai sus, utilizați un ordin mai mare componentă a ajunge la router ca un propunerii de componentă.
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
};
Reacționa-Router 2.0.0+ Răspunde
Această versiune este compatibil cu 1.x deci nu's nu este nevoie de un Upgrade Ghid. Doar prin exemple ar trebui să fie destul de bun.
Asta a spus, dacă doriți pentru a comuta la noul model, nu's o browserHistory module în interiorul router-ul pe care le puteți accesa cu
import { browserHistory } din 'reacționa-router'
Acum ai acces la istoricul browser-ului, astfel încât să puteți face lucruri cum ar fi push, înlocuiți, etc... Cum ar fi:
browserHistory.push('/unii/calea')
Lecturi suplimentare: Istorii și Navigation
Reacționa-Router-ul 1.x.x Răspunde
Eu nu va merge în modernizarea detalii. Puteți citi despre asta în Upgrade Guide
Principala modificare cu privire la întrebarea aici este schimbarea de Navigare mixin la Istorie. Acum's folosind browser-ul historyAPI de a schimba traseul astfel, vom folosi pushState()
de acum.
Aici's un exemplu folosind Mixin:
var Example = React.createClass({
mixins: [ History ],
navigateToHelpPage () {
this.history.pushState(null, `/help`);
}
})
Rețineți că această "Istorie" provine din rackt/history de proiect. Nu de a Reacționa-Router-ul în sine.
Dacă tu nu't doriți să utilizați Mixin pentru un motiv oarecare (poate din cauza ES6 clasa), atunci puteți accesa istoricul pe care le obține de la router din asta.elemente de recuzită.istoria. Acesta va fi accesibil doar pentru componentele prestate de către Router. Deci, dacă doriți să-l folosească în orice copil componente trebuie să fie trecut în jos ca un atribut prin
recuzita`.
Puteți citi mai multe despre noua versiune la 1.0.x documentația
Aici este o pagina de ajutor în mod special despre navigarea în afara component](https://github.com/rackt/react-router/blob/1.0.x/docs/guides/advanced/NavigatingOutsideOfComponents.md)
Se recomandă hapsân o trimitere la istoria = createHistory () și `replaceState la asta.
Reacționa-Router 0.13.x Răspunde
Am ajuns în aceeași problemă și-ar putea găsi doar soluția cu Navigare mixin care vine cu reacționa-router.
Aici's cum am făcut-o
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>);
}
});
Am fost capabil de a apela transitionTo()
fără a fi nevoie pentru a accesa .contextul
Sau ai putea încerca fantezie ES6 "clasa"
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
};
Reacționa-Router-Redux
Notă: daca're folosind Redux, există un alt proiect numit Reacționa-Router-Redux, care vă oferă redux legături pentru ReactRouter, folosind oarecum aceeași abordare ca Reacționa-Redux nu
Reacționează-Router-Redux are câteva metode disponibile care permit simplu navigarea din interiorul acțiune creatori. Acestea pot fi deosebit de utile pentru persoanele care au arhitecturii existente în React Nativ, și ei doresc să utilizeze aceleași modele în Reacționa Web cu minim de șabloane deasupra capului.
Explora următoarele metode:
push(locație)
înlocui(locație)
du - te(număr)`goBack()
goForward()
Aici este un exemplu de utilizare, cu 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>
Reacționa-Router v2
Pentru cea mai recentă versiune (v2.0.0-rc5
), se recomandă o metodă de navigare este direct împingând pe istoria singleton. Puteți vedea că, în acțiune în Navigarea in afara de Componente doc.
Relevante fragment:
import { browserHistory } from 'react-router';
browserHistory.push('/some/path');
Dacă utilizați mai noi reacționa-router-ul API, aveți nevoie pentru a face uz de "istorie" din asta.elemente de recuzită` atunci când în interiorul componentelor, astfel:
this.props.history.push('/some/path');
Acesta oferă, de asemenea, `pushState dar asta este învechită pe logat avertismente.
Dacă utilizați a reacționa-router-redux
, acesta oferă un "push", în funcție puteți trimite astfel:
import { push } from 'react-router-redux';
this.props.dispatch(push('/some/path'));
Cu toate acestea, acest lucru poate fi folosit doar pentru a schimba URL-ul, nu și să navigați la pagina.
Aici's cum puteți face acest lucru cu a reacționa-router v2.0.0
cu ES6. a reacționa-router
a mutat departe de mixins.
import React from 'react';
export default class MyComponent extends React.Component {
navigateToPage = () => {
this.context.router.push('/my-route')
};
render() {
return (
<button onClick={this.navigateToPage}>Go!</button>
);
}
}
MyComponent.contextTypes = {
router: React.PropTypes.object.isRequired
}
Reacționa-Router-4.x Răspuns :
Pe final, am dori să aibă un singur obiect istorie, care pot transporta chiar și în afara componente. Ce îmi place să fac este să aibă un singur history.js fișierul de import la cerere, și doar să-l manipuleze.
Trebuie doar pentru a schimba `BrowserRouter la Router, și specificați istoria prop. Asta nu't schimba nimic pentru tine, doar că ai propria ta istorie obiect care te poate manipula cum vrei tu.
Aveți nevoie pentru a instala istorie, bibliotecă utilizate de a reacționa-router
.
Exemplu de utilizare, ES6 notație :
history.js
import createBrowserHistory from 'history/createBrowserHistory'
export default createBrowserHistory()
BasicComponent.js
import React, { Component } from 'react';
import history from './history';
class BasicComponent extends Component {
goToIndex(e){
e.preventDefault();
history.push('/');
}
render(){
return <a href="#" onClick={this.goToIndex}>Previous</a>;
}
}
EDITA 16 aprilie 2018 :
Dacă aveți pentru a naviga de la o componentă care este de fapt prestate de la un "Traseu" component, puteți accesa, de asemenea, istoria de elemente de recuzită, cum ar fi asta :
BasicComponent.js
import React, { Component } from 'react';
class BasicComponent extends Component {
navigate(e){
e.preventDefault();
this.props.history.push('/url');
}
render(){
return <a href="#" onClick={this.navigate}>Previous</a>;
}
}
Pentru aceasta, care nu controlează partea de server si din aceasta cauza este folosind hash router v2:
Locul tău istorie în fișier separat (de ex. app_history.js ES6):
import { useRouterHistory } from 'react-router'
import { createHashHistory } from 'history'
const appHistory = useRouterHistory(createHashHistory)({ queryKey: false });
export default appHistory;
Și să-l utilizați peste tot!
Punctul de intrare pentru a reacționa-router (app.js ES6):
import React from 'react'
import { render } from 'react-dom'
import { Router, Route, Redirect } from 'react-router'
import appHistory from './app_history'
...
const render((
<Router history={appHistory}>
...
</Router>
), document.querySelector('[data-role="app"]'));
Navigarea în interiorul orice componentă (ES6):
import appHistory from '../app_history'
...
ajaxLogin('/login', (err, data) => {
if (err) {
console.error(err); // login failed
} else {
// logged in
appHistory.replace('/dashboard'); // or .push() if you don't need .replace()
}
})
Reacționa Router V4
tl:dr;
if (navigate) {
return <Redirect to="/" push={true} />
}
Simplu și declarativ răspunsul este că aveți nevoie pentru a utiliza <Redirecționare a={URL} împinge={boolean} /> în combinație cu setState()
push: boolean - atunci când adevărat, redirecționarea va împinge o nouă intrare pe istorie în loc să o înlocuiască pe cea actuală.
import { Redirect } from 'react-router'
class FooBar extends React.Component {
state = {
navigate: false
}
render() {
const { navigate } = this.state
// here is the important part
if (navigate) {
return <Redirect to="/" push={true} />
}
// ^^^^^^^^^^^^^^^^^^^^^^^
return (
<div>
<button onClick={() => this.setState({ navigate: true })}>
Home
</button>
</div>
)
}
}
Exemplu complet aici. Citeste mai mult aici.
PS. De exemplu utilizează ES7+ Proprietate de Initializare pentru a inițializa de stat. Uite aici, precum și, dacă're interesat.
Avertisment: acest răspuns se referă doar ReactRouter versiuni înainte de 1.0
voi actualiza acest răspuns cu 1.0.0-rc1 cazuri de utilizare după!
Puteți face acest lucru fără mixins prea.
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>);
}
});
Te-am prins cu contexte este că acesta nu este accesibil dacă ați defini contextTypes
pe clasa.
Pentru ca ceea ce este context, este un obiect, ca elemente de recuzită, care sunt transmise de la parinte la copil, dar este trecut în jos în mod implicit, fără a fi nevoie să redeclare elemente de recuzită de fiecare dată. Vezi https://www.tildedave.com/2014/11/15/introduction-to-contexts-in-react-js.html
Am încercat cel puțin 10 moduri de a face acest lucru înainte de ceva lucrat bine!
@Felipe Skinner's withRouter
răspunsul a fost un pic copleșitoare pentru mine, și am fost't de sigur că am vrut să fac noi "ExportedWithRouter" nume de clasa.
Aici's cel mai simplu și mai curat mod de a face, circa actual de a Reacționa-Router 3.0.0 și ES6:
Reacționa-Router 3.x.x cu ES6:
import { withRouter } from 'react-router';
class Example extends React.Component {
// use `this.props.router.push('/some/path')` here
};
// Export the decorated class
export default withRouter(Example);
sau, dacă-l's nu implicit clasa, export, cum ar fi:
withRouter(Example);
export { Example };
Rețineți că în 3.x.x, <Link>
componenta în sine este folosind router.push, astfel încât să puteți trece orice v-ar trece
<Link-ul de la=` tag-ul, cum ar fi:
this.props.router.push({pathname: '/some/path', query: {key1: 'val1', key2: 'val2'})'
Pentru a face navigarea programatic, aveți nevoie pentru a împinge un nou istorie la recuzita.istorie în "componentă", deci ceva de genul acest lucru poate face munca pentru tine:
//using ES6
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props)
this.handleClick = this.handleClick.bind(this)
}
handleClick(e) {
e.preventDefault()
/* Look at here, you can add it here */
this.props.history.push('/redirected');
}
render() {
return (
<div>
<button onClick={this.handleClick}>
Redirect!!!
</button>
</div>
)
}
}
export default App;
Nu poate fi cea mai buna abordare, dar... Folosind reacționa-router v4, următoarele Script-ar putea da o idee pentru unii.
In pronunțată componentă de mai jos, de exemplu, LoginPage
, router
obiectul este accesibil și suna router.transitionTo('/pagina de start')` pentru a naviga.
Cod de navigare a fost luat de.
"reacționa-router-ul": "^4.0.0-2",
"de a reacționa": "^15.3.1",
import Router from 'react-router/BrowserRouter';
import { History } from 'react-history/BrowserHistory';
import createHistory from 'history/createBrowserHistory';
const history = createHistory();
interface MatchWithPropsInterface {
component: typeof React.Component,
router: Router,
history: History,
exactly?: any,
pattern: string
}
class MatchWithProps extends React.Component<MatchWithPropsInterface,any> {
render() {
return(
<Match {...this.props} render={(matchProps) => (
React.createElement(this.props.component, this.props)
)}
/>
)
}
}
ReactDOM.render(
<Router>
{({ router }) => (
<div>
<MatchWithProps exactly pattern="/" component={LoginPage} router={router} history={history} />
<MatchWithProps pattern="/login" component={LoginPage} router={router} history={history} />
<MatchWithProps pattern="/homepage" component={HomePage} router={router} history={history} />
<Miss component={NotFoundView} />
</div>
)}
</Router>,
document.getElementById('app')
);
Pentru ES6 + Reacționa componente, următoarea soluție a lucrat pentru mine.
Am urmat Felippe skinner, dar a adăugat o soluție end-to-end pentru a ajuta la începători ca mine.
Mai jos sunt versiuni am folosit:
"reacționa-router-ul": "^2.7.0"
"de a reacționa": "^15.3.1"
Mai jos este meu reacționa componentă în cazul în care am folosit programatic navigare folosind reacționa-router:
import React from 'react';
class loginComp extends React.Component {
constructor( context) {
super(context);
this.state = {
uname: '',
pwd: ''
};
}
redirectToMainPage(){
this.context.router.replace('/home');
}
render(){
return <div>
// skipping html code
<button onClick={this.redirectToMainPage.bind(this)}>Redirect</button>
</div>;
}
};
loginComp.contextTypes = {
router: React.PropTypes.object.isRequired
}
module.exports = loginComp;
Mai jos este de configurare pentru router-ul meu:
import { Router, Route, IndexRedirect, browserHistory } from 'react-router'
render(<Router history={browserHistory}>
<Route path='/' component={ParentComp}>
<IndexRedirect to = "/login"/>
<Route path='/login' component={LoginComp}/>
<Route path='/home' component={HomeComp}/>
<Route path='/repair' component={RepairJobComp} />
<Route path='/service' component={ServiceJobComp} />
</Route>
</Router>, document.getElementById('root'));
In Reacționa-Router v4 și ES6
Puteți folosi withRouter " și " acest lucru.elemente de recuzită.istorie.push`.
import {withRouter} from 'react-router-dom';
class Home extends Component {
componentDidMount() {
this.props.history.push('/redirect-to');
}
}
export default withRouter(Home);
Pentru a folosi withRouter cu o clasă bazată pe componente, încercați ceva de genul asta de mai jos. Don't uita pentru a schimba declarația de export pentru a folosi withRouter`:
import { withRouter } din 'reacționa-router-dom'
class YourClass extends React.Component {
yourFunction = () => {
doSomeAsyncAction(() =>
this.props.history.push('/other_location')
)
}
render() {
return (
<div>
<Form onSubmit={ this.yourFunction } />
</div>
)
}
}
export default withRouter(YourClass);
bazat pe răspunsul anterior de José Antonio Postigo și Ben Wheeler noutatea? este de a fi scris în mașina de Scris și utilizarea decorațiuni SAU static proprietate/domeniul
import * as React from "react";
import Component = React.Component;
import { withRouter } from "react-router";
export interface INavigatorProps {
router?: ReactRouter.History.History;
}
/**
* Note: goes great with mobx
* @inject("something") @withRouter @observer
*/
@withRouter
export class Navigator extends Component<INavigatorProps, {}>{
navigate: (to: string) => void;
constructor(props: INavigatorProps) {
super(props);
let self = this;
this.navigate = (to) => self.props.router.push(to);
}
render() {
return (
<ul>
<li onClick={() => this.navigate("/home")}>
Home
</li>
<li onClick={() => this.navigate("/about")}>
About
</li>
</ul>
)
}
}
/**
* Non decorated
*/
export class Navigator2 extends Component<INavigatorProps, {}> {
static contextTypes = {
router: React.PropTypes.object.isRequired,
};
navigate: (to: string) => void;
constructor(props: INavigatorProps, context: any) {
super(props, context);
let s = this;
this.navigate = (to) =>
s.context.router.push(to);
}
render() {
return (
<ul>
<li onClick={() => this.navigate("/home")}>
Home
</li>
<li onClick={() => this.navigate("/about")}>
About
</li>
</ul>
)
}
}
cu orice npm instalat astăzi. "reacționa-router-ul": "^3.0.0" și "@tipuri/reacționa-router-ul": "^2.0.41"
În reacționa router v4. Am urmat acest două mod de a ruta programatic.
1. this.props.history.push("/something/something")
2. this.props.history.replace("/something/something")
Numărul doi
Înlocuiește actuala intrare în stivă istorie
Pentru a lua istoria în elemente de recuzită care le poate avea să-și încheie componenta cu
cu Reacționa-Router v4 la orizont, există acum un nou mod de a face acest lucru.
import { MemoryRouter, BrowserRouter } from 'react-router';
const navigator = global && global.navigator && global.navigator.userAgent;
const hasWindow = typeof window !== 'undefined';
const isBrowser = typeof navigator !== 'undefined' && navigator.indexOf('Node.js') === -1;
const Router = isBrowser ? BrowserRouter : MemoryRouter;
<Router location="/page-to-go-to"/>
reacționa-lego este un exemplu de aplicație care afișează cum să utilizați/actualizare a reacționa-router și includ, de exemplu testele funcționale care naviga în aplicație.
Cu actualul Reacționa versiune (15.3), acest lucru.elemente de recuzită.istorie.push('/locul de amplasare');
lucrat pentru mine, dar a arătat următorul avertisment:
browser-ul.js:49 Avertizare: [reacționa-router]
elemente de recuzită.istorie și
context.istoriasunt depreciate. Vă rugăm să folosiți context.router
.
și am rezolvat-o cu ajutorul context.router-ul asta:
import React from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.backPressed = this.backPressed.bind(this);
}
backPressed() {
this.context.router.push('/back-location');
}
...
}
MyComponent.contextTypes = {
router: React.PropTypes.object.isRequired
};
export default MyComponent;
Reacționează-Router V4
daca're folosind versiunea 4, atunci puteți folosi biblioteca mea (Shameless plug) în cazul în care pur și simplu trimite o acțiune și totul funcționează!
dispatch(navigateTo("/aboutUs"));