Was ist der beste Weg, um redirect eine Seite mit dem Router Reagieren?

Ich bin neu zu Reagieren, Router und erfahren, dass es so viele Möglichkeiten zur Neuausrichtung der einen Seite:

  1. Mit browserHistory.push("/path") 
    import { browserHistory } from 'react-router';
//do something...
browserHistory.push("/path");
  2. Mit this.context.router.push("/path") 
    class Foo extends React.Component {
    constructor(props, context) {
        super(props, context);
        //do something...
    }
    redirect() {
        this.context.router.push("/path")
    }
}

Foo.contextTypes = {
    router: React.PropTypes.object
}
  3. In Reagieren Router v4, es gibt this.context.history.push("/path") und this.props.history.push("/path"). Details: Wie push-to-Geschichte Reagieren v4 Router?

Ich bin so verwirrt von all diesen Optionen, ist es eine beste Weg, um redirect eine Seite?

InformationsquelleAutor der Frage Liutong Chen | 2017-07-13

  1. 56

    Eigentlich es hängt von deinem use-case -

    1) Sie möchten Ihre route aus nicht autorisierte Benutzer

    Wenn das der Fall ist, können Sie die Komponente namens <Redirect /> und kann die Umsetzung der folgenden Logik:

    import React from 'react'
import  { Redirect } from 'react-router-dom'

const ProtectedComponent = () => {
 if (authFails)
    return <Redirect to='/login'  />
}
return <div> My Protected Component </div>
}

    Aber Bedenken Sie, dass, wenn Sie wollen <Redirect /> zu arbeiten, wie Sie erwarten, sollten Sie es in Ihrer Komponente die render-Methode, so dass es schließlich als ein DOM-element, sonst funktioniert es nicht.

    2), den Sie weiterleiten möchten, nachdem eine bestimmte Aktion (sagen wir mal nach dem erstellen eines Elements)

    In diesem Fall können Sie die Geschichte

    myFunction() {
 addSomeStuff(data).then(() => {
      this.props.history.push('/path')
    }).catch((error) => {
      console.log(error)
    })

    oder

    myFunction() {
 addSomeStuff()
 this.props.history.push('/path')
}

    Haben, um Zugang zu der Geschichte, Sie können wickeln Sie Ihre Komponente mit ein-HOC-namens withRouter wenn Sie wickeln Sie Ihre Komponente mit, es geht match location und history Requisiten. Für mehr Details bitte haben Sie einen Blick auf die offizielle Dokumentation über withRouter

    Wenn Ihre Komponente ist ein Kind <Route /> Komponente, ich meine, wenn es so etwas wie <Route path='/path' component={myComponent} /> Sie nicht haben, um wickeln Sie Ihre Komponente mit withRouter <Route /> geht match location und history zu seinem Kind.

    3) leiten Sie nach dem Klick auf ein element

    Hier gibt es zwei Möglichkeiten. Sie können history.push() durch übergabe an einen onClick-Ereignis

    <div onClick={this.props.history.push('/path')}> some stuff </div>

    oder verwenden Sie <Link /> Komponente

     `<Link to='/path' > some stuff </Link>`

    Ich denke Faustregel mit diesem Fall (ich nehme an, vor allem beceause der Leistung) zu nutzen versuchen <Link /> ersten

    InformationsquelleAutor der Antwort Cagri Yardimci

Schreibe einen Kommentar