[React Router] 直接ルーティングしていない孫コンポーネントからhistoryにアクセス可能にする（WithRouter）

<親コンポーネント>

↓ ルーティング ←ここでprops.history.pushで値（state.userName）を渡す

<子コンポーネント>

↓ 通常のタグコンポーネントとして使用

<孫コンポーネント> ←ここでstate.userNameにアクセスする

import React from 'react';
import { RouteComponentProps } from 'react-router-dom';

const Home = (props: RouteComponentProps) => {
  return (
    <div>
      <h1>Home page</h1>
      <ul>
        <li>
          <button
            onClick={() => {
              props.history.push({
                pathname: '/profile',
                state: { userName: 'わかつき' }
              });
            }}
          >
            Go to my profile
          </button>
        </li>
      </ul>
    </div>
  );
};

export default Home;

import React from 'react';
import Header from './header/Header';
import { RouteComponentProps } from 'react-router-dom';

const MyProfile: React.FC<RouteComponentProps> = (
  props
) => {
  return (
    <div>
      <Header />
      <h1>This is my profile</h1>
      <ul>
        {props.location.state && (
          <li>
            <button
              onClick={() => {
                props.history.goBack();
              }}
            >
              Back
            </button>
          </li>
        )}
      </ul>
    </div>
  );
};

export default MyProfile;

import React from 'react';
import './Header.css';
import { RouteComponentProps } from 'react-router-dom';

type Props = RouteComponentProps<
  {},
  {},
  { userName: string }
>;

const Header: React.FC<Props> = (props) => {
  return (
    <div className="header">
      <h1>ヘッダー</h1>
      {props.location.state &&
        props.location.state.userName}
    </div>
  );
};

export default Header;

import React from 'react';
import './Header.css';
import {
  RouteComponentProps,
  withRouter
} from 'react-router-dom';

type Props = RouteComponentProps<
  {},
  {},
  { userName: string }
>;

const Header: React.FC<Props> = (props) => {
  return (
    <div className="header">
      <h1>ヘッダー</h1>
      {props.location.state &&
        props.location.state.userName}
    </div>
  );
};

export default withRouter(Header);