Programowa nawigacja przy użyciu routera react

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 . Powinieneś użyć 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&#322em

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

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

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