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

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

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

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.

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.

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

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.

ComponentDidMount und ComponentWillUnMount prüfen: