Clear state of React Component on location change

Lately i have made a choice to switch to React over Angular which i was using through the previous couple of Years.

In my current application i want to have some generic pages (which currently i implement as functional components.). The logic behind those generic pages is that with the usage of useLocation hook i get all the required data in order to handle my page content.
Moreover using Link from the react-router-dom i have the below principle

<Link id={item.id} 
      className="menu-link" 
      to={{ 
               pathname: 'pathname',
               _pathProps: pathPropObject
         }} 
      replace
><span className="menu-text">{label}</span></Link>

And i have plenty of routers in my router that matches paths to the same component. As an example

<Route path={path1} component={reusableComponent} />
<Route path={path2} component={reusableComponent} />

where path1 !== path2 of course.

The whole logic works pretty well except that i have the following issue with the state management of my component.

When i switch between routes which don’t use the same component e.g from reusableComponent to anotherComponent everything works fine. Each time the reusable component resets its state and everything works fine.
But when i switch on routes that use the reusableComponent things start to break. Each time rendering the reusableComponent the return function checks if all required properties are gathered. So using the useEffect on location every time i change the main properties my component needs to change it’s content. My code looks like this

import React, { Fragment, useEffect, useState} from "react";
import {useLocation} from "react-router-dom";
import { get, isArray, isNumber, isString, isEqual, isNil } from "lodash";
...

export const reusableComponent: React.FunctionComponent = (props: any) => {
    const [mainProperty, setmainProperty] = useState<string | null>(null);
    const [pageData, setPageData] = useState<DataObject|null>(null);

    const location = useLocation();

    ...

    useEffect(() => {
        if (!pageData || !entity) return;
    }, [pageData])

    useEffect(() => {
        const _mainProperty = get(location, "params.mainProperty", null);
        if (!isNil(_mainProperty )) setmainProperty(_mainProperty );
        setPageData({
            ....
        });
    }, [location]);

    ....

    return (
        <React.Fragment>
           {
             isNil(pageData)? <LoadingComponent /> : <AnotherComponernt data={pageData} />
           }
        </React.Fragment>
    );
};

export default reusableComponent;

The problem here is that i need to prevent the component to render with <AnotherComponernt data={pageData} /> on the concurrent calls of the route, because except the first call the pageData object is already filled and the useEffect will change it after the first render.

So in the bottom line, my goal is to have the reusable component logic with the difference that every time on location change it should clear it’s core state properties in order to prevent unwanted functionality of the component to run. Is my logic wrong or i should implement some other logic with context or something in order to achieve my goal?

Thanks in advance!

Source: React Router Questions