Programmatisch navigieren mit React Router

React-Router 5.1.0+ Antwort (mit Hooks und React >16.8)

Sie können den neuen useHistory-Hook für funktionale Komponenten und programmatische Navigation verwenden:

import { useHistory } from "react-router-dom";

function HomeButton() {
  let history = useHistory();
  // use history.push('/some/path') here
};

React-Router 4.0.0+ Antwort

In 4.0 und höher verwenden Sie die History als Prop Ihrer Komponente.

class Example extends React.Component {
   // use `this.props.history.push('/some/path')` here
};

HINWEIS: this.props.history existiert nicht, wenn Ihre Komponente nicht von gerendert wurde. Sie sollten verwenden, um this.props.history in YourComponent zu haben

React-Router 3.0.0+ Antwort

In 3.0 und höher, verwenden Sie den Router als Prop Ihrer Komponente.

class Example extends React.Component {
   // use `this.props.router.push('/some/path')` here
};

React-Router 2.4.0+ Antwort

In 2.4 und höher, verwenden Sie eine Komponente höherer Ordnung, um den Router als Requisite Ihrer Komponente zu erhalten.

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+ Antwort

Diese Version ist abwärtskompatibel mit der Version 1.x, so dass es keine Notwendigkeit für einen Upgrade Guide gibt. Ein Blick auf die Beispiele sollte genügen.

Wenn Sie jedoch auf das neue Muster umsteigen möchten, gibt es ein browserHistory Modul innerhalb des Routers, auf das Sie mit

importieren { browserHistory } aus 'react-router'`

Jetzt haben Sie Zugriff auf Ihre Browser-History, so dass Sie Dinge wie Push, Replace, etc. machen können. Zum Beispiel:

browserHistory.push('/some/path')

Weitere Lektüre: Histories und Navigation

React-Router 1.x.x Antwort

Ich werde nicht auf die Details des Upgrades eingehen. Sie können dies im Upgrade Guide nachlesen.

Die wichtigste Änderung in Bezug auf die Frage hier ist der Wechsel von Navigation mixin zu History. Jetzt wird die Browser historyAPI verwendet, um die Route zu ändern, also werden wir von nun an pushState() verwenden.

Hier's ein Beispiel mit Mixin:

var Example = React.createClass({
  mixins: [ History ],
  navigateToHelpPage () {
    this.history.pushState(null, `/help`);
  }
})

Beachten Sie, dass diese History vom rackt/history Projekt stammt. Nicht von React-Router selbst.

Wenn Sie Mixin aus irgendeinem Grund nicht verwenden wollen (vielleicht wegen der ES6 Klasse), dann können Sie auf die History, die Sie vom Router erhalten, über this.props.history zugreifen. Sie wird nur für die Komponenten zugänglich sein, die von Ihrem Router gerendert werden. Wenn Sie sie also in einer untergeordneten Komponente verwenden wollen, muss sie als Attribut über "props" weitergegeben werden.

Sie können mehr über die neue Version in der [1.0.x Dokumentation] (https://github.com/rackt/react-router/tree/1.0.x/docs) lesen.

Hier ist eine Hilfeseite speziell zur Navigation außerhalb der Komponente

Es wird empfohlen, eine Referenz history = createHistory() zu nehmen und replaceState darauf aufzurufen.

React-Router 0.13.x Antwort

Ich hatte das gleiche Problem und konnte die Lösung nur mit dem Navigation-Mixin finden, das im React-Router enthalten ist.

Hier's, wie ich es tat

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>);
  }
});

Ich konnte transitionTo() aufrufen, ohne auf .context zugreifen zu müssen

Oder Sie könnten die ausgefallene ES6 Klasse ausprobieren

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

Hinweis: Wenn Sie Redux verwenden, gibt es ein weiteres Projekt namens React-Router-Redux, das Ihnen Redux-Bindungen für ReactRouter bietet, wobei es in etwa den gleichen Ansatz wie React-Redux tut

React-Router-Redux hat ein paar Methoden zur Verfügung, die ein einfaches Navigieren innerhalb von Action Creators ermöglichen. Diese können besonders nützlich für Leute sein, die eine bestehende Architektur in React Native haben und die gleichen Muster in React Web mit minimalem Boilerplate-Overhead nutzen wollen.

Lernen Sie die folgenden Methoden kennen:

• push(location)
• Ersetzen(Ort)
• go(Zahl)
• Zurück()
• Vorwärts gehen()

Hier ist ein Anwendungsbeispiel mit Redux-Thunk:

./actioncreators.js

import { goBack } from 'react-router-redux'

export const onBackPress = () => (dispatch) => dispatch(goBack())

./viewcomponent.js

 {
    e.preventDefault()
    this.props.onBackPress()
  }}
>
  CANCEL

React-Router v2

In der neuesten Version (v2.0.0-rc5) ist die empfohlene Navigationsmethode das direkte Schieben auf das History Singleton. Sie können das in Aktion sehen im Navigieren außerhalb von Komponenten doc.

Relevanter Auszug:

import { browserHistory } from 'react-router';
browserHistory.push('/some/path');

Wenn Sie die neuere React-Router-API verwenden, müssen Sie die history von this.props innerhalb von Komponenten verwenden:

this.props.history.push('/some/path');

Es bietet auch pushState an, aber das ist laut protokollierten Warnungen veraltet.

Wenn Sie react-router-redux verwenden, bietet es eine push Funktion, die Sie wie folgt versenden können:

import { push } from 'react-router-redux';
this.props.dispatch(push('/some/path'));

Diese Funktion kann jedoch nur dazu verwendet werden, die URL zu ändern und nicht, um tatsächlich zur Seite zu navigieren.

Warnung: diese Antwort deckt nur ReactRouter Versionen vor 1.0 ab

Ich werde diese Antwort mit 1.0.0-rc1 Anwendungsfällen nach aktualisieren!

Sie können dies auch ohne Mixins tun.

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>);
  }
});

Das Problem mit Kontexten ist, dass man nicht darauf zugreifen kann, es sei denn, man definiert die contextTypes in der Klasse.

Was den Kontext angeht, so ist es ein Objekt, wie props, das von Eltern zu Kindern weitergegeben wird, aber es wird implizit weitergegeben, ohne dass props jedes Mal neu deklariert werden muss. Siehe https://www.tildedave.com/2014/11/15/introduction-to-contexts-in-react-js.html