it-swarm.com.de

Programmgesteuertes Navigieren mit dem React Router

Mit react-router kann ich das Link -Element verwenden, um Links zu erstellen, die nativ vom Reaktionsrouter verarbeitet werden.

Ich sehe intern, dass es this.context.transitionTo(...) aufruft.

Ich möchte eine Navigation durchführen, aber nicht über einen Link, z. B. über eine Dropdown-Auswahl. Wie kann ich das im Code machen? Was ist this.context?

Ich habe das Mixin Navigation gesehen, aber kann ich das auch ohne Mixins tun?

1159
George Mauer

Reagiere auf Router v4

In Version 4 von React Router gibt es drei Ansätze für das programmgesteuerte Routing innerhalb von Komponenten.

  1. Verwenden Sie die Komponente withRouter höherer Ordnung.
  2. Verwende Komposition und rendere einen _<Route>_
  3. Verwenden Sie den context.

React Router ist meist ein Wrapper um die Bibliothek history . history behandelt die Interaktion mit dem window.history des Browsers mit dessen Browser- und Hash-Verlauf. Es bietet auch einen Speicherverlauf, der für Umgebungen ohne globalen Verlauf nützlich ist. Dies ist besonders nützlich bei der Entwicklung mobiler Apps (_react-native_) und beim Testen von Einheiten mit Node.

Eine history-Instanz verfügt über zwei Navigationsmethoden: Push und replace. Wenn Sie sich history als ein Array von besuchten Orten vorstellen, fügt Push dem Array einen neuen Ort hinzu und replace ersetzt den aktuellen Ort im Array durch den neuen. Normalerweise möchten Sie beim Navigieren die Methode Push verwenden.

In früheren Versionen von React Router mussten Sie eine eigene history -Instanz erstellen. In Version 4 erstellen die Komponenten _<BrowserRouter>_, _<HashRouter>_ und _<MemoryRouter>_ einen Browser. Hash und Speicherinstanzen für Sie. React Router stellt die Eigenschaften und Methoden der Instanz history, die Ihrem Router zugeordnet ist, über den Kontext unter dem Objekt router zur Verfügung.

1. Verwenden Sie die Komponente withRouter höherer Ordnung

Die übergeordnete Komponente withRouter fügt das Objekt history als Requisite der Komponente ein. Auf diese Weise können Sie auf die Methoden Push und replace zugreifen, ohne sich mit context befassen zu müssen.

_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>
))
_

2. Komposition verwenden und einen _<Route>_ rendern

Die Komponente _<Route>_ eignet sich nicht nur zum Abgleichen von Standorten. Sie können eine pfadlose Route rendern und sie wird immer mit der aktuellen Position übereinstimmen . Die Komponente _<Route>_ übergibt die gleichen Requisiten wie withRouter, sodass Sie über die Requisite history auf die Methoden history zugreifen können.

_import { Route } from 'react-router-dom'

const Button = () => (
  <Route render={({ history}) => (
    <button
      type='button'
      onClick={() => { history.Push('/new-location') }}
    >
      Click Me!
    </button>
  )} />
)
_

3. Verwenden Sie den Kontext *

Aber Sie sollten wahrscheinlich nicht

Die letzte Option sollten Sie nur verwenden, wenn Sie mit Reacts context -Modell arbeiten möchten. Obwohl der Kontext eine Option ist, sollte betont werden, dass der Kontext eine instabile API ist und React einen Abschnitt Warum nicht Kontext verwenden? in der Dokumentation enthält. Benutzung also auf eigenes Risiko!

_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 und 2 sind die am einfachsten zu implementierenden Optionen. In den meisten Anwendungsfällen sind sie die besten Wetten.

1042
Paul S

React-Router 4.0.0 + Antwort

Verwenden Sie in 4.0 und höher den Verlauf als Requisite Ihrer Komponente.

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

HINWEIS: this.props.history ist nicht vorhanden, wenn Ihre Komponente nicht von <Route> gerendert wurde. Sie sollten <Route path="..." component={YourComponent}/> verwenden, um this.props.history in YourComponent zu haben

React-Router 3.0.0 + Antwort

Verwenden Sie in Version 3.0 und höher den Router als Requisite Ihrer Komponente.

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

React-Router 2.4.0 + Antwort

Verwenden Sie in 2.4 und höher 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 1.x, sodass kein Upgrade-Handbuch erforderlich ist. Nur die Beispiele durchzugehen sollte gut genug sein.

Wenn Sie jedoch zu dem neuen Muster wechseln möchten, befindet sich im Router ein browserHistory-Modul, auf das Sie zugreifen können

import { browserHistory } from 'react-router'

Jetzt haben Sie Zugriff auf Ihren Browserverlauf, sodass Sie Dinge wie Push, Ersetzen usw. ausführen können.

browserHistory.Push('/some/path')

Weiterführende Literatur: Geschichten und Navigation


React-Router 1.x.x Antwort

Ich werde nicht auf die Aktualisierung von Details eingehen. Sie können dies im pgrade Guide nachlesen

Die wichtigste Änderung bei dieser Frage ist der Wechsel vom Navigationsmix in die Geschichte. Jetzt verwendet es die Browser-HistoryAPI, um die Route zu ändern, sodass wir von nun an pushState() verwenden.

Hier ist ein Beispiel mit Mixin:

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

Beachten Sie, dass dieses History aus dem rackt/history -Projekt stammt. Nicht vom React-Router selbst.

Wenn Sie Mixin aus irgendeinem Grund nicht verwenden möchten (möglicherweise aufgrund der ES6-Klasse), können Sie über this.props.history auf den Verlauf zugreifen, den Sie vom Router erhalten. Sie ist nur für die von Ihrem Router gerenderten Komponenten zugänglich. Wenn Sie es also in untergeordneten Komponenten verwenden möchten, muss es als Attribut über props weitergegeben werden.

Weitere Informationen zur neuen Version finden Sie unter 1.0.x-Dokumentation

Hier ist eine Hilfeseite speziell zum Navigieren außerhalb Ihrer Komponente

Es wird empfohlen, eine Referenz history = createHistory() abzurufen und replaceState aufzurufen.

React-Router 0.13.x Antwort

Ich bin auf dasselbe Problem gestoßen und konnte die Lösung nur mit dem Navigationsmix finden, der mit dem React-Router geliefert wird.

So habe ich es gemacht

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 probieren Sie das schicke 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

Hinweis: Wenn Sie Redux verwenden, gibt es ein anderes Projekt namens React-Router-Redux , mit dem Sie Redux-Bindungen für erstellen können ReactRouter, mit dem gleichen Ansatz wie React-Redux

In React-Router-Redux stehen einige Methoden zur Verfügung, mit denen Sie ganz einfach aus den Erstellern von Aktionen heraus navigieren können. Diese können besonders für Benutzer nützlich sein, die über eine vorhandene Architektur in React Native verfügen und dieselben Muster in React Web mit minimalem Overhead für die Boilerplate verwenden möchten.

Erforschen Sie die folgenden Methoden:

  • Push(location)
  • replace(location)
  • go(number)
  • goBack()
  • goForward()

Hier ist ein Anwendungsbeispiel mit 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>
828
Felipe Skinner

React-Router v2

In der neuesten Version (v2.0.0-rc5) wird empfohlen, die Navigationsmethode durch direktes Verschieben auf den Verlaufs-Singleton zu verwenden. Sie können dies in Aktion in Navigieren außerhalb von Components doc sehen.

Relevanter Auszug:

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

Wenn Sie die neuere React-Router-API verwenden, müssen Sie history aus this.props verwenden, wenn Sie sich in Komponenten befinden.

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

Es bietet auch pushState, aber das wird pro protokollierte Warnungen veraltet.

Wenn Sie react-router-redux verwenden, bietet es eine Push -Funktion, die Sie folgendermaßen versenden können:

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

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

492
Bobby

So machen Sie das mit react-router v2.0.0 mit ES6 . _react-router_ hat sich von Mixins entfernt.

_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
}
_
49
Alex Miller

React-Router 4.x Antwort:

Ich mag es, ein einzelnes Verlaufsobjekt zu haben, das ich auch außerhalb von Bauteilen tragen kann. Was ich gerne mache, ist eine einzelne history.js-Datei zu haben, die ich bei Bedarf importiere und einfach manipuliere.

Sie müssen nur BrowserRouter in Router ändern und die Verlaufsstütze angeben. Dies ändert nichts für Sie, außer dass Sie ein eigenes Verlaufsobjekt haben, das Sie nach Belieben bearbeiten können.

Sie müssen history , die von react-router verwendete Bibliothek, installieren.

Anwendungsbeispiel, ES6-Notation:

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

EDIT 16. April 2018:

Wenn Sie von einer Komponente aus navigieren müssen, die tatsächlich von einer Route -Komponente gerendert wurde, können Sie auch über Requisiten auf den Verlauf zugreifen:

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>;
    }
}
37
Eric Martin

Für diesen, der die Serverseite nicht kontrolliert und aus diesem Grund den Hash-Router v2 verwendet:

Platzieren Sie Ihr history in einer separaten Datei (z. B. app_history.js ES6):

import { useRouterHistory } from 'react-router'
import { createHashHistory } from 'history'
const appHistory = useRouterHistory(createHashHistory)({ queryKey: false });

export default appHistory;

Und überall einsetzen!

Ihr Einstiegspunkt für den React-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"]'));

Ihre Navigation innerhalb einer Komponente (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()
  }
})
35
Alexey Volodko

Reagiere Router V4

tl: dr;

if (navigate) {
  return <Redirect to="/" Push={true} />
}

Die einfache und aussagekräftige Antwort lautet, dass Sie <Redirect to={URL} Push={boolean} /> in Kombination mit setState() verwenden müssen.

Push: boolean - Wenn true, wird durch Umleiten ein neuer Eintrag in den Verlauf verschoben, anstatt den aktuellen zu ersetzen.


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

Vollständiges Beispiel hier . Lesen Sie mehr hier .

PS. Im Beispiel wird ES7 + Property Initializers verwendet, um den Status zu initialisieren. Schauen Sie auch hier , wenn Sie interessiert sind.

30
Lyubomir

Warnung: Diese Antwort bezieht sich nur auf ReactRouter-Versionen vor 1.0

Ich werde diese Antwort nachher mit 1.0.0-rc1 Use Cases 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 den Kontexten ist, dass auf sie nur zugegriffen werden kann, wenn Sie contextTypes für die Klasse definieren.

Was den Kontext betrifft, handelt es sich um ein Objekt, das wie Requisiten vom Elternteil an das Kind weitergegeben wird, aber implizit weitergegeben wird, ohne dass Requisiten jedes Mal neu deklariert werden müssen. Siehe https://www.tildedave.com/2014/11/15/introduction-to-contexts-in-react-js.html

26
Qiming

Ich habe mindestens 10 Möglichkeiten ausprobiert, bevor etwas richtig funktionierte!

Die withRouter Antwort von @Felipe Skinner war ein bisschen überwältigend für mich und ich war mir nicht sicher, ob ich neue "ExportedWithRouter" -Klassennamen erstellen wollte.

Hier ist der einfachste und sauberste Weg, um dies zu tun, mit dem aktuellen React-Router 3.0.0 und ES6:

React-Router 3.x.x mit 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);

oder, wenn es nicht Ihre Standardklasse ist, exportieren Sie wie folgt:

withRouter(Example);
export { Example };

Beachten Sie, dass in 3.x.x die <Link> -Komponente selbst router.Push verwendet, sodass Sie alles übergeben können, was Sie dem <Link to= -Tag übergeben würden, z.

   this.props.router.Push({pathname: '/some/path', query: {key1: 'val1', key2: 'val2'})'
22
Ben Wheeler

Um die Navigation programmgesteuert auszuführen, müssen Sie ein neues history in das props.history in Ihrem component verschieben, damit so etwas die Arbeit für Sie erledigen kann :

//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;
19
Alireza

Für ES6 + React Komponenten hat die folgende Lösung für mich funktioniert.

Ich folgte Felippe Skinner, fügte aber eine End-to-End-Lösung hinzu, um Anfängern wie mir zu helfen.

Unten sind die Versionen, die ich verwendet habe:

"React-Router": "^ 2.7.0"

"reagieren": ^ 15.3.1

Unten ist meine Reaktionskomponente, in der ich die programmatische Navigation mit dem React-Router verwendet habe:

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;

nten ist die Konfiguration für meinen Router:

 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'));
17
Softwareddy

Nachfolgend finden Sie den Arbeitscode: Wie in dieser Artikel beschrieben, ist die Navigation mit dem React Router sehr einfach:

class Register extends React.Component {
  state = {
    toDashboard: false,
  }
  handleSubmit = (user) => {
    saveUser(user)
      .then(() => this.setState(() => ({
        toDashboard: true
      })))
  }
  render() {
    if (this.state.toDashboard === true) {
      return <Redirect to='/dashboard' />
    }

    return (
      <div>
        <h1>Register</h1>
        <Form onSubmit={this.handleSubmit} />
      </div>
    )
  }
}

< Redirect /> is

Composable (deklarativ) Benutzerereignis -> Statusänderung -> erneutes Rendern

Registerkomponente wird von React Router gerendert, unser Code könnte so aussehen

class Register extends React.Component {
  handleSubmit = (user) => {
    saveUser(user).then(() =>
      this.props.history.Push('/dashboard')
    ))
  }
  render() {
    return (
      <div>
        <h1>Register</h1>
        <Form onSubmit={this.handleSubmit} />
      </div>
    )
  }
}

durch Hinzufügen von withRouter würde es so aussehen

import {
  withRouter
} from 'react-router-dom'

class Register extends React.Component {
  handleSubmit = (user) => {
    saveUser(user).then(() =>
      this.props.history.Push('/dashboard')
    ))
  }
  render() {
    return (
      <div>
        <h1>Register</h1>
        <Form onSubmit={this.handleSubmit} />
      </div>
    )
  }
}

export default withRouter(Register)

Es gibt zwei Möglichkeiten, programmgesteuert mit React Router - und history.Push zu navigieren. Was Sie verwenden, hängt hauptsächlich von Ihnen und Ihrem speziellen Anwendungsfall ab, obwohl ich versuche, Redirect zu bevorzugen.

16
kiran malvi

Vielleicht nicht der beste Ansatz, aber ... Unter Verwendung von React-Router v4 könnte der folgende TypeScript-Code für einige eine Idee geben.

In der gerenderten Komponente unten, z. LoginPage, router Objekt ist zugänglich und rufen Sie einfach router.transitionTo('/homepage') auf, um zu navigieren.

Navigationscode wurde genommen von .

"react-router": "^4.0.0-2","react": "^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')
);
16
mcku

In React-Router v4 und ES6

Sie können withRouter und this.props.history.Push verwenden.

import {withRouter} from 'react-router-dom';

class Home extends Component {

    componentDidMount() {
        this.props.history.Push('/redirect-to');
    }
}

export default withRouter(Home);
15
Hossein

Versuchen Sie Folgendes, um withRouter mit einer klassenbasierten Komponente zu verwenden. Vergessen Sie nicht, die export-Anweisung so zu ändern, dass withRouter verwendet wird:

import { withRouter } from 'react-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);
13
Janos

Im reaktionsrouter v4. Ich folge diesen beiden Wegen, um programmatisch zu routen.

1. this.props.history.Push("/something/something")
2. this.props.history.replace("/something/something")

Nummer zwei

Ersetzt den aktuellen Eintrag im Verlaufsstapel

Um Geschichte in Requisiten zu bekommen, müssen Sie Ihre Komponente möglicherweise mit einwickeln

withRouter

10
saiful619945

basierend auf der vorherigen Antwort
von José Antonio Postigo und Ben Wheeler
die Neuheit? ist in TypeScript zu schreiben
und die Verwendung von Dekorateure
ODER statisch Eigenschaft/Feld

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

mit was auch immer npm heute installiert. "reag-router": "^ 3.0.0" und
"@ types/react-router": "^ 2.0.41"

10
Dan

mit React-Router v4 am Horizont gibt es jetzt eine neue Möglichkeit, dies zu tun.

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"/>

react-lego ist eine Beispiel-App, die zeigt wie man den React-Router benutzt/aktualisiert und enthält Beispiel-Funktionstests, die durch die App navigieren.

10
peter.mouland

Wenn Sie Hash- oder Browserverlauf verwenden, können Sie dies tun

hashHistory.Push('/login');
browserHistory.Push('/login');
8
Zaman Afzal

Mit der aktuellen React Version (15.3) hat this.props.history.Push('/location'); für mich funktioniert, aber es wurde die folgende Warnung angezeigt:

browser.js: 49 Warnung: [react-router] props.history und context.history sind veraltet. Bitte benutzen Sie context.router.

und ich habe es mit context.router wie folgt gelöst:

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;

React-Router V4

wenn Sie Version 4 verwenden, können Sie meine Bibliothek (Shameless Plug) verwenden, in der Sie einfach eine Aktion auslösen und alles funktioniert!

dispatch(navigateTo("/aboutUs"));

Trippler

6
Garry Taylor

Diejenigen, die Probleme haben, dies auf dem React-Router v4 zu implementieren.

Hier ist eine funktionierende Lösung zum Navigieren durch die Reaktions-App von Redux-Aktionen.

history.js

import createHistory from 'history/createBrowserHistory'

export default createHistory()

App.js/Route.jsx

import { Router, Route } from 'react-router-dom'
import history from './history'
...
<Router history={history}>
 <Route path="/test" component={Test}/>
</Router>

another_file.js OR Redux-Datei

import history from './history' 

history.Push('/test') // this should change the url and re-render Test component

Alles dank diesem Kommentar: Kommentar zu ReactTraining-Problemen

5
reflexgravity

Wenn RR4 mit Redux durch React-Router-Redux gepaart werden soll, können Sie auch die Routing-Aktionsersteller von react-router-redux verwenden.

import { Push, replace, ... } from 'react-router-redux'

class WrappedComponent extends React.Component {
  handleRedirect(url, replaceState = true) { 
    replaceState 
      ? this.props.dispatch(replace(url)) 
      : this.props.dispatch(Push(url)) 
  }
  render() { ... }
}

export default connect(null)(WrappedComponent)

Wenn Sie Redux Thunk/Saga zum Verwalten des asynchronen Flusses verwenden, importieren Sie die oben genannten Aktionsersteller in Redux-Aktionen, und aktivieren Sie den Hook, um Komponenten mithilfe von mapDispatchToProps zu reagieren.

4
Xlee

Vielleicht nicht die beste Lösung, aber es erledigt die Arbeit:

import { Link } from 'react-router-dom';

// create functional component Post
export default Post = () => (
    <div className="component post">

        <button className="button delete-post" onClick={() => {
            // ... delete post
            // then redirect, without page reload, by triggering a hidden Link
            document.querySelector('.trigger.go-home').click();
        }}>Delete Post</button>

        <Link to="/" className="trigger go-home hidden"></Link>

    </div>
);

Grundsätzlich ruft eine Logik, die an eine Aktion gebunden ist (in diesem Fall eine Nachlöschung), einen Auslöser für die Umleitung auf. Dies ist nicht ideal, da Sie Ihrem Markup einen DOM-Knoten-Trigger hinzufügen, damit Sie ihn bei Bedarf bequem aufrufen können. Außerdem werden Sie direkt mit dem DOM interagieren, was in einer React -Komponente möglicherweise nicht erwünscht ist.

Diese Art der Weiterleitung ist jedoch nicht so häufig erforderlich. Ein oder zwei zusätzliche, versteckte Links in Ihrem Komponenten-Markup würden also nicht so sehr schaden, besonders wenn Sie ihnen aussagekräftige Namen geben.

3
neatsu

Die richtige Antwort war zum Zeitpunkt des Schreibens für mich

this.context.router.history.Push('/');

Sie müssen Ihrer Komponente jedoch PropTypes hinzufügen

Header.contextTypes = {
  router: PropTypes.object.isRequired
}
export default Header;

Vergessen Sie nicht, PropTypes zu importieren

import PropTypes from 'prop-types';
3
webmaster

Für React Router v4 +

Angenommen, Sie müssen nicht während des ersten Renderns selbst navigieren (für das Sie die <Redirect> -Komponente verwenden können), dann tun wir dies in unserer App.

Definieren Sie eine leere Route, die null zurückgibt. Auf diese Weise können Sie auf das Verlaufsobjekt zugreifen. Sie müssen dies auf der obersten Ebene tun, auf der Ihr Router definiert ist.

Jetzt können Sie alle Dinge tun, die an history wie history.Push(), history.replace(), history.go(-1) etc!

import React from 'react';
import { HashRouter, Route } from 'react-router-dom';

let routeHistory = null;

export function navigateTo(path) {
  if(routeHistory !== null) {
    routeHistory.Push(path);
  }
}

export default function App(props) {
  return (
    <HashRouter hashType="noslash">
      <Route
        render={({ history }) => {
          routeHistory = history;
          return null;
        }}
      />
      {/* Rest of the App */}
    </HashRouter>
  );
}
1
Aftab Khan

Das hat bei mir geklappt, keine speziellen Importe nötig:

<input type="button" name="back" id="back" class="btn btn-primary" value="Back" onClick={() => { this.props.history.goBack() }} />

1
JJ_Coder4Hire