Προγραμματισμένη πλοήγηση με τη χρήση react router

React-Router 5.1.0+ Απάντηση (χρησιμοποιώντας άγκιστρα και React >16.8)

Μπορείτε να χρησιμοποιήσετε το νέο άγκιστρο useHistory στα λειτουργικά στοιχεία και στην προγραμματιστική πλοήγηση:

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

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

React-Router 4.0.0+ Απάντηση

Στην έκδοση 4.0 και πάνω, χρησιμοποιήστε το ιστορικό ως prop του συστατικού σας.

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

ΣΗΜΕΙΩΣΗ: το this.props.history δεν υπάρχει στην περίπτωση που το στοιχείο σας δεν έχει αποδοθεί από το . Θα πρέπει να χρησιμοποιήσετε το για να έχετε το this.props.history στο YourComponent

React-Router 3.0.0+ Απάντηση

Στην έκδοση 3.0 και άνω, χρησιμοποιήστε το δρομολογητή ως prop του συστατικού σας.

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

React-Router 2.4.0+ Απάντηση

Στην έκδοση 2.4 και άνω, χρησιμοποιήστε ένα συστατικό ανώτερης τάξης για να λάβετε το δρομολογητή ως στήριγμα του συστατικού σας.

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+ Απάντηση

Αυτή η έκδοση είναι συμβατή προς τα πίσω με την έκδοση 1.x, οπότε δεν υπάρχει ανάγκη για Οδηγό αναβάθμισης. Η απλή εξέταση των παραδειγμάτων θα πρέπει να είναι αρκετή.

Τούτου λεχθέντος, εάν επιθυμείτε να μεταβείτε στο νέο πρότυπο, υπάρχει'ένα module browserHistory μέσα στο δρομολογητή στο οποίο μπορείτε να έχετε πρόσβαση με την εντολή

import { browserHistory } from 'react-router'

Τώρα έχετε πρόσβαση στο ιστορικό του προγράμματος περιήγησής σας, ώστε να μπορείτε να κάνετε πράγματα όπως push, replace, κλπ... Όπως:

'/some/path')`

Περαιτέρω ανάγνωση: Ιστορίες και Navigation

React-Router 1.x.x Απάντηση

Δεν θα υπεισέλθω σε λεπτομέρειες αναβάθμισης. Μπορείτε να διαβάσετε σχετικά στον Οδηγό αναβάθμισης

Η κύρια αλλαγή σχετικά με την ερώτηση εδώ είναι η αλλαγή από Navigation mixin σε History. Τώρα χρησιμοποιεί το historyAPI του προγράμματος περιήγησης για να αλλάξει τη διαδρομή, οπότε θα χρησιμοποιούμε την pushState() από εδώ και στο εξής.

Εδώ'είναι ένα παράδειγμα που χρησιμοποιεί Mixin:

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

Σημειώστε ότι αυτό το History προέρχεται από το έργο rackt/history. Όχι από το ίδιο το React-Router.

Αν δεν θέλετε να χρησιμοποιήσετε το Mixin για κάποιο λόγο (ίσως λόγω της κλάσης ES6), τότε μπορείτε να έχετε πρόσβαση στο ιστορικό που λαμβάνετε από τον δρομολογητή από το this.props.history. Θα είναι προσβάσιμο μόνο για τα στοιχεία που αποδίδονται από το Router σας. Έτσι, αν θέλετε να το χρησιμοποιήσετε σε οποιοδήποτε παιδικό συστατικό πρέπει να μεταβιβαστεί ως χαρακτηριστικό μέσω του props.

Μπορείτε να διαβάσετε περισσότερα για τη νέα έκδοση στην τεκμηρίωση 1.0.x

Εδώ είναι μια σελίδα βοήθειας ειδικά για την πλοήγηση εκτός του συστατικού σας

Συνιστά την αρπαγή μιας αναφοράς history = createHistory() και την κλήση του replaceState σε αυτήν.

React-Router 0.13.x Απάντηση

Αντιμετώπισα το ίδιο πρόβλημα και μπόρεσα να βρω τη λύση μόνο με το Navigation mixin που συνοδεύει το react-router.

Εδώ's πώς το έκανα

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

Ήμουν σε θέση να καλέσω την transitionTo() χωρίς την ανάγκη πρόσβασης στο .context

Ή θα μπορούσατε να δοκιμάσετε το φανταχτερό 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 &gt, Σημείωση: αν χρησιμοποιείτε Redux, υπάρχει ένα άλλο έργο που ονομάζεται React-Router-Redux που σας δίνει δεσμεύσεις redux για το ReactRouter, χρησιμοποιώντας κάπως την ίδια προσέγγιση που React-Redux.

Το React-Router-Redux έχει μερικές διαθέσιμες μεθόδους που επιτρέπουν την απλή πλοήγηση μέσα από τους δημιουργούς ενεργειών. Αυτές μπορεί να είναι ιδιαίτερα χρήσιμες για άτομα που έχουν υπάρχουσα αρχιτεκτονική στο React Native και επιθυμούν να χρησιμοποιήσουν τα ίδια μοτίβα στο React Web με ελάχιστο boilerplate overhead.

Εξερευνήστε τις ακόλουθες μεθόδους:

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

Εδώ είναι ένα παράδειγμα χρήσης, με 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

Για την πιο πρόσφατη έκδοση (v2.0.0-rc5), η συνιστώμενη μέθοδος πλοήγησης είναι η απευθείας ώθηση στο singleton του ιστορικού. Μπορείτε να το δείτε αυτό σε δράση στο Πλοήγηση εκτός του εγγράφου Components.

Σχετικό απόσπασμα:

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

Εάν χρησιμοποιείτε το νεότερο API του react-router, θα πρέπει να κάνετε χρήση του history από το this.props όταν μέσα στα components έτσι:

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

Προσφέρει επίσης το pushState, αλλά αυτό είναι απαρχαιωμένο σύμφωνα με τις καταγεγραμμένες προειδοποιήσεις.

Αν χρησιμοποιείτε το react-router-redux, προσφέρει μια συνάρτηση push που μπορείτε να αποστείλετε ως εξής:

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

Ωστόσο, αυτό μπορεί να χρησιμοποιηθεί μόνο για την αλλαγή της διεύθυνσης URL, όχι για την πραγματική πλοήγηση στη σελίδα.

Προειδοποίηση: αυτή η απάντηση καλύπτει μόνο τις εκδόσεις του ReactRouter πριν από την έκδοση 1.0

Θα ενημερώσω αυτή την απάντηση με τις περιπτώσεις χρήσης 1.0.0-rc1 μετά!

Μπορείτε να το κάνετε αυτό και χωρίς 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>);
  }
});

Το πρόβλημα με τα contexts είναι ότι δεν είναι προσβάσιμα αν δεν ορίσετε τους contextTypes στην κλάση.

Όσο για το τι είναι το context, είναι ένα αντικείμενο, όπως τα props, που μεταβιβάζονται από τον γονέα στο παιδί, αλλά μεταβιβάζονται σιωπηρά, χωρίς να χρειάζεται να επαναδηλώνετε τα props κάθε φορά. Βλέπε https://www.tildedave.com/2014/11/15/introduction-to-contexts-in-react-js.html