Was ist der beste Weg, um eine Seite mit React Router umzuleiten?

99

Ich bin neu bei React Router und erfahre, dass es so viele Möglichkeiten gibt, eine Seite umzuleiten:

  1. Verwenden von browserHistory.push("/path")

    import { browserHistory } from 'react-router';
    //do something...
    browserHistory.push("/path");
    
  2. Verwenden von 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 React Router v4 gibt es this.context.history.push("/path")und this.props.history.push("/path"). Details: Wie kann ich in React Router v4 zum Verlauf wechseln?

Ich bin so verwirrt von all diesen Optionen. Gibt es eine beste Möglichkeit, eine Seite umzuleiten?

Liutong Chen
quelle
Sie verwenden v4 ja?
Azium
1
Der Link zu dem anderen Stapel, den Sie gepostet haben, ist ziemlich klar. Ich würde empfehlen,withRouter
Azium

Antworten:

172

Eigentlich hängt es von Ihrem Anwendungsfall ab.

1) Sie möchten Ihre Route vor nicht autorisierten Benutzern schützen

In diesem Fall können Sie die aufgerufene Komponente verwenden <Redirect />und die folgende Logik implementieren:

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

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

Denken Sie daran, dass Sie, wenn Sie <Redirect />wie erwartet arbeiten möchten , diese in die Rendermethode Ihrer Komponente einfügen sollten, damit sie schließlich als DOM-Element betrachtet werden kann, da sie sonst nicht funktioniert.

2) Sie möchten nach einer bestimmten Aktion umleiten (z. B. nach dem Erstellen eines Elements).

In diesem Fall können Sie den Verlauf verwenden:

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

oder

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

Um Zugriff auf den Verlauf zu erhalten, können Sie Ihre Komponente mit einem aufgerufenen HOC umschließen withRouter. Wenn Sie Ihre Komponente damit umwickeln, geht sie vorbei match locationund historystützt. Weitere Informationen finden Sie in der offiziellen Dokumentation zu withRouter .

Wenn Ihre Komponente ein Kind eines ist <Route />Komponente, das heißt , wenn es so etwas wie ist <Route path='/path' component={myComponent} />, müssen Sie nicht Ihre Komponente wickeln mit withRouter, weil <Route />Pässe match, locationund historyzu seinem Kind.

3) Weiterleiten nach Klicken auf ein Element

Hier gibt es zwei Möglichkeiten. Sie können es verwenden, history.push()indem Sie es an ein onClickEreignis übergeben:

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

oder Sie können eine <Link />Komponente verwenden:

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

Ich denke, die Faustregel in diesem Fall ist, zuerst zu versuchen, es zu verwenden <Link />, ich nehme an, besonders wegen der Leistung.

Cagri Yardimci
quelle
Es funktioniert für mich `this.props.history.push (" / ");` React-Router - v4.2 Danke @Cagri
MD Ashik
stackoverflow.com/questions/60579292/… Könnten Sie sich bitte diese Fragen ansehen?
a125
In der letzten Option bedeutet historydies this.props.history.push('/path'), dass die Komponente ein untergeordnetes Element von ist <Route/>oder dass der withRouterWrapper beim Export korrekt ist , da die Komponente in ihren Requisiten in der Lage ist, dies zu tun .
Andre
Es ist also möglich, zu einer anderen Komponente zu routen, ohne dies anzugeben <Route path='/path' component={Comp}/>. Ich denke, nur render() { return <Comp/>}in einem Zustand?
Andre
@Andre yep das ist richtig für die Verwendung von this.props.historyaber ich bin nicht sicher, ob ich Ihre zweite Frage richtig habe? Was meinst du genau damit route to another component?
Cagri Yardimci
6

Jetzt mit React-Router v15.1und weiter können wir useHistoryeinbinden. Dies ist ein super einfacher und klarer Weg. Hier ist ein einfaches Beispiel aus dem Quellblog.

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

function BackButton({ children }) {
  let history = useHistory()
  return (
    <button type="button" onClick={() => history.goBack()}>
      {children}
    </button>
  )
}

Sie können dies in jeder Funktionskomponente und in benutzerdefinierten Hooks verwenden. Und ja, dies funktioniert nicht mit Klassenkomponenten wie mit jedem anderen Hook.

Weitere Informationen hierzu finden Sie hier https://reacttraining.com/blog/react-router-v5-1/#usehistory

Anand Singh
quelle
2

Sie können auch die React Router Dom Library verwenden. UseHistory;

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

function HomeButton() {
  let history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}
`

https://reactrouter.com/web/api/Hooks/usehistory

Maya Liberman
quelle
0

Sie können auch Redirectinnerhalb der Routefolgenden. Dies gilt für die Behandlung ungültiger Routen.

<Route path='*' render={() => 
     (
       <Redirect to="/error"/>
     )
}/>
Pramuditha
quelle
0

Eine der einfachsten Möglichkeiten: Verwenden Sie Link wie folgt:

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

<Link to={`your-path`} activeClassName="current">{your-link-name}</Link>

Wenn wir den gesamten Div-Abschnitt als Link behandeln möchten:

 <div>
     <Card as={Link} to={'path-name'}>
         .... 
           card content here
         ....
     </Card>
 </div>

RameshD
quelle