wake-up-neo.com

Wie erkenne ich Routenänderungen mit dem reakt-router v4?

Ich muss feststellen, ob eine Routenänderung aufgetreten ist, damit ich eine Variable in true ändern kann.

Ich habe diese Fragen durchgesehen:
1. https://github.com/ReactTraining/react-router/issues/3554
2. Wie höre ich Routenänderungen in reaktiver Router v4 ab?
3. Routenänderung mit Reakt-Router erkennen

Keiner von ihnen hat für mich gearbeitet. Gibt es eine klare Möglichkeit, eine Funktion aufzurufen, wenn eine Routenänderung auftritt.

5
HunterLiu

Eine Möglichkeit ist die Verwendung der withRouter Komponente höherer Ordnung.

Live-Demo (klicken Sie auf die Hyperlinks, um die Routen zu ändern und die Ergebnisse in der angezeigten Konsole anzuzeigen)

Zugriff auf die Eigenschaften des Verlaufsobjekts und die Entsprechung mit dem nächstgelegenen Objekt erhalten Sie über die Komponente withRouter höherer Ordnung. withRouter übergibt aktualisierte Elemente für Übereinstimmungen, Positionen und Verlauf an die umwickelte Komponente, wenn diese gerendert wird.

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/withRouter.md

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

class App extends Component {
    componentDidUpdate(prevProps) {
        if (this.props.location.pathname !== prevProps.location.pathname) {
            console.log('Route change!');
        }
    }
    render() {
        return (
            <div className="App">
                ...routes
            </div>
        );
    }
}

export default withRouter(props => <App {...props}/>);

Ein weiteres Beispiel, das URL-Parameter verwendet:

Wenn Sie die Profilrouten von /profile/20 in /profile/32 ändern

Und Ihre Route wurde als /profile/:userId definiert.

componentDidUpdate(prevProps) {
    if (this.props.match.params.userId !== prevProps.match.params.userId) {
        console.log('Route change!');
    }
}
12
wdm

Mit React Hooks sollte es so einfach sein wie:

useEffect(() => {
    const { pathname } = location;
    console.log('New path:', pathname);
}, [location.pathname]);

Durch die Weitergabe von location.pathname im zweiten Array-Argument bedeutet, dass Sie "useEffect" verwenden, um es nur dann erneut auszuführen, wenn location.pathname Änderungen.

Live-Beispiel mit Code-Quelle: https://codesandbox.io/s/detect-route-path-changes-with-react-hooks-dt16i

6
parse

React Router v5 erkennt jetzt die Routenänderungen automatisch dank Hooks. Hier ist das Beispiel vom Team dahinter:

import { Switch, useLocation } from 'react-router'

function usePageViews() {
  let location = useLocation()

  useEffect(
    () => {
      ga.send(['pageview', location.pathname])
    },
    [location]
  )
}

function App() {
  usePageViews()
  return <Switch>{/* your routes here */}</Switch>
}

In diesem Beispiel wird bei jeder Änderung der URL eine "Seitenansicht" an Google Analytics (ga) gesendet.

2

Wenn die Komponente als component -Eigenschaft von <Route> Angegeben wird, werden von React Router 4 (RR4) einige zusätzliche Eigenschaften übergeben: match, location und history.

Dann sollten Sie die Lebenszyklusmethode componentDidUpdate verwenden, um location Objekte vor und nach der Aktualisierung zu vergleichen (beachten Sie die ES-Objektvergleichsregeln). Da Ortsobjekte unveränderlich sind, stimmen sie nie überein. Auch wenn Sie zum selben Ort navigieren.

  componentDidUpdate(newProps) {
    if (this.props.location !== newProps.location) {
      this.handleNavigation();
    }
  }

withRouter sollte verwendet werden, wenn Sie auf diese Eigenschaften in einer beliebigen Komponente zugreifen müssen, die nicht als component Eigenschaft einer Route angegeben ist. Stellen Sie sicher, dass Ihre App in <BrowserRouter> Eingeschlossen ist, da sie alle erforderlichen APIs enthält. Andernfalls funktionieren diese Methoden nur in Komponenten, die in <BrowserRouter> Enthalten sind.

Es gibt Fälle, in denen der Benutzer entscheidet, die Seite über Navigationsschaltflächen anstelle der dedizierten Benutzeroberfläche in Browsern neu zu laden. Aber Vergleiche wie folgt:

this.props.location.pathname !== prevProps.location.pathname

wird es unmöglich machen.

1
user10917078

Reagieren Sie auf komponentenbasierte Architektur. Warum gehorchen wir nicht dieser Regel?

Sie können DEMO sehen.

Jede Seite muss von einem HOC umbrochen werden. Dadurch wird das Wechseln der Seite automatisch erkannt.

Zuhause

import React from "react";
import { NavLink } from "react-router-dom";
import withBase from "./withBase";

const Home = () => (
  <div>
    <p>Welcome Home!!!</p>
    <NavLink to="/login">Go to login page</NavLink>
  </div>
);

export default withBase(Home);

withBase HOC

import React from "react";

export default WrappedComponent =>
  class extends React.Component {
    componentDidMount() {
      this.props.handleChangePage();
    }

    render() {
      return <WrappedComponent />;
    }
  };
0
Ukasyah

Wie wäre es, wenn Sie die Länge des Verlaufsobjekts in Ihrem Anwendungsstatus verfolgen? Das vom react-router bereitgestellte History-Objekt wird bei jedem Durchlauf einer neuen Route länger. Siehe Bild unten.

 enter image description here

ComponentDidMount und ComponentWillUnMount prüfen:  enter image description here