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 — user5734311
– user5734311, Commented Jul 7, 2020 at 8:36

shineonbro · Accepted Answer · 2020-07-07 07:37:21Z

5

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 7, 2020 at 7:37

shineonbro

2751 gold badge3 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user5734311 Over a year ago

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: codesandbox.io/s/kind-nobel-foo6v?file=/src/App.js

shineonbro Over a year ago

@ChrisG That also works! Thanks for the live demo :)

user5734311 Over a year ago

Feel free to edit your answer accordingly, because duplicate code is bad practice; there's also this existing question: stackoverflow.com/questions/45373742/…

Khattak01 Over a year ago

This will not work in react 17+, stackoverflow.com/questions/68613526/…

Collectives™ on Stack Overflow

Tracking URL changes with React Hooks

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related