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

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?

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.

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

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

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

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

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>