[React] router path변경시 이벤트 발생시키기

app.js는 초기한번만 렌더되고 리렌더되지 않기때문에 app.js에서 url-path를 useEffect의
의존성으로 처리해도 리렌더 되지 않는다.리액트 라우터 스위치내에서 처리하면 된다.

app.tsx

import {Pages} from '../pages';
const App = () => {
    render() {
        return (
            <div>
                <Route exact path="/" component={Home}/>
                <Switch>
                   <Pages />
                </Switch>
            </div>
        );
    }
}

Pages.tsx

import React from "react";
import { Redirect, Route } from "react-router-dom";
import { useSelector } from "react-redux";
export const Pages = () => {

const checkTokenExpired = async () => {
    const cookie = Cookies.get('adminToken');

    if (!cookie) {
      return false;
    }

    try {
      const response = await fetch(
        `${process.env.REACT_APP_API_URL}${process.env.REACT_APP_API_BASEURL}/user/auth/token-expired`,
        {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
            Authorization: `${cookie}`,
          },
        }
      );

      if (response.status === 200) {
        return true;
      } else {
        Cookies.remove('adminToken');
        return false;
      }
    } catch (e) {
      return false;
    }
  };
  
  checkTokenExpired();
    render() {
        return (
           <Route
      render={props =>
        isAuthenticated ? (
          <Component {...props} />
        ) : (
          <Redirect
            to={{
              pathname: "/login",
              state: { from: props.location }
            }}
          />
        )
      }
      {...props}
    />
        );
    }
}

출처
https://stackoverflow.com/questions/57986395/react-useeffect-is-not-triggering-on-route-change
https://stackoverflow.com/questions/60849807/react-js-how-to-rerender-app-js-when-some-action-is-fired