Tracking URL changes with React Hooks

Question

I thought this would be a great question to ask for others to reference later. In my previous revisions I would 'hardcode' five to six sidebars and three to four different top navigation components for each page or section of my app because I couldn't come up with a better solution to determine what page I'm currently on.

Here's the only resource or example I've found regarding hooks!

but with the structure of my app, I'm not sure how to approach this.

index.tsx:

import React from 'react';
import ReactDOM from 'react-dom';
import { ApolloProvider } from '@apollo/react-hooks';
import { apolloClient } from './utils/x';

import Router from './routes/Router';

ReactDOM.render(
  <ApolloProvider client={apolloClient}>
    <Router />
  </ApolloProvider>,
  document.getElementById('root') as HTMLElement
);

Router.tsx:

import React, { useEffect } from 'react';

import {
  useHistory,
  BrowserRouter,
  Route,
} from "react-router-dom";

import Landing from './landing/Landing';

import Zero from './dashboard/0';
import One from './dashboard/1';
import Two from './dashboard/2';
import Three from './dashboard/3';

const Router = () => {
    const history = useHistory()

    useEffect(() => {
        return history.listen((location) => {
            console.log(`You changed the page to: ${location.pathname}`)
        })
    },[history])

    return (
    <BrowserRouter>
      <Route exact path="/" component={Landing} />

      <Route exact path="/dashboard" component={Zero} />
      <Route exact path="/dashboard/1" component={One} />
      <Route exact path="/dashboard/2" component={Two} />
      <Route exact path="/dashboard/3" component={Three} />
    </BrowserRouter>
  );
};

export default Router;

TypeError: Cannot read property 'history' of undefined

I'm probably so far fetched and out of scope, but I would love to figure this out...

Does this answer your question? [Detect Route Change with react-router](https://stackoverflow.com/questions/45373742/detect-route-change-with-react-router) — Chris G, Jul 07 '20 at 08:36

score 2 · Accepted Answer · answered Jul 07 '20 at 07:37

2

I got to thinking as soon as I wrote the last sentence, I was indeed out of scope

    const history = useHistory()

    useEffect(() => {
        return history.listen((location) => {
            console.log(`You changed the page to: ${location.pathname}`)
        })
    },[history])

The following code works well and would go in the components listed in the router

answered Jul 07 '20 at 07:37

shineonbro

165
1
11

Putting that code into each component will create lots of duplicate code; here's how to insert a listener so you can track changes in a single spot: https://codesandbox.io/s/kind-nobel-foo6v?file=/src/App.js – Chris G Jul 07 '20 at 07:55
@ChrisG That also works! Thanks for the live demo :) – shineonbro Jul 07 '20 at 08:16
Feel free to edit your answer accordingly, because duplicate code is bad practice; there's also this existing question: https://stackoverflow.com/questions/45373742/detect-route-change-with-react-router – Chris G Jul 07 '20 at 08:22

Tracking URL changes with React Hooks

1 Answers1