ルーターの概念がよくわかりませんが、砂箱でテストしたいです.
ああ、バージョン6のルータだけが使えるから...苦労をたくさんしましたが、
例えば、ユーザHistory()=>ユーザNavigator()である.
そこで,まずバージョンを下げ,ルータハッシュを実装してテストすることにした.
今日参考にして、日曜日の林夏ゾラはとても喜んでいます.
日曜日の勉強

Routerを使用したHeaderの実装

Package

react-router-dom (@version 5.0.1)

styled-components

styled-reset

Directory

components
- App.js
-Header.js
-Router.js
-GlobalStyles.js

pages
-Home.js
- About.js
-Contact.js

index.js

1.グローバルスタイルの設定

「グローバルスタイルとは?」
グローバルスタイリングです.cssはグローバル、cssに使用されます.moduleを使ってもstylesを導入して使う手間があります.
一般的にpublisherは、モジュールcssを使用するか、対応するcssをインポートする方法に慣れています.しかし、多くの開発者がstyled-componsesを使用しているのは、素子のパッケージが原因です.グローバルに使用するcssを使用すると,クラス名が重ならないように注意する.パッケージ化とモジュール化の反応の意味がなくなるからである.
したがってstyled-componsesを使用し、グローバルスタイルを構成部品として管理します.(styled-resetを使用)
グローバルスタイルの設定

// GlobalStyles.js
const { createGlobalStyle } = require("styled-components");
const { default: reset } = require("styled-reset");
const GlobalStyles= createGlobalStyle`
    ${reset};
    *{
        margin: 0;padding:0;
    }
    body{
        font-size:14px;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        box-sizing: border-box;
    }
    a{
        text-decoration: none;color:inherit;
    }
    ul,li,ol{
        list-style: none;
    }
`
export default GlobalStyles;

//App.js
import React from 'react';
import GlobalStyles from './GlobalStyles';
export default function App() {
  return (
    <div className="App">
      <GlobalStyles />
    </div>
  );
}

2.Header UIの実装（スタイル化コンポーネントを使用）

//Header.js
import { Link } from "react-router-dom";
import styled from "styled-components";
export default function Header(){
  const Header= styled.header`
  width: 100%;
  height:60px;
  box-shadow: 1px 3px 5px rgba(0,0,0,0.2);
  `;
  const Nav= styled.nav`
  width: 1280px;margin:0 auto;
  display: flex;
  justify-content: space-between;
  line-height: 60px;
  `
  const Logo= styled.h1`
  font-size: 2rem;
  font-weight:600;
  `
  const NavList= styled.ul`
  display: flex;
  width:400px;
  justify-content: space-between;
  text-align: center;
  `
  const Items= styled.li`
    &:hover{
      text-decoration: underline;
    }
  `
  return <Header>
    <Nav>  
    <Logo><Link to="/">LOGO</Link></Logo>
    <NavList>
      <Items><Link to="/">Home</Link></Items>
      <Items><Link to="/about">About</Link></Items>
      <Items><Link to="/contact">Contact</Link></Items>
      </NavList>
      </Nav>
    </Header>
}

//App.js
import React from 'react';
import GlobalStyles from './GlobalStyles';
import Header from './Header';
export default function App() {
  return (
    <div className="App">
      <GlobalStyles />
      <Header />
    </div>
  );
}

3.ルータ接続

//App.js
import React from 'react';
import { Route, Switch } from 'react-router';
import About from '../pages/About';
import Contact from '../pages/Contact';
import Home from '../pages/Home';
import GlobalStyles from './GlobalStyles';
import Header from './Header';
export default function App() {
  return (
    <div className="App">
       <GlobalStyles />
      <Header />
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/contact"  component={Contact} />
        <Route path="/about" component={About} />
      </Switch>
    </div>
  );
}

パス接続完了!

4.withRouterの使用

withRouterとは?

リンクなしでアイテムを転送し、ログインを可能にするreact-routerコンポーネント.
たとえば、Aboutページに入ると、フォントの色と背景を変更します.しかしheaderはルータに接続されていないためpropsを受信できません.この場合はwithRouterを使用します.

//Header.js
import { Link,withRouter } from "react-router-dom";
import styled from "styled-components";
export default  withRouter(function Header({location}){
    const {pathname}= location;
  const Header= styled.header`
  width: 100%;
  height:60px;
  box-shadow: 1px 3px 5px rgba(0,0,0,0.2);
  background-color: ${pathname.includes('about') ? `#000` : `#fff`} ;
  color: ${pathname.includes('about') ? `#fff` : `#000`} ;
  `;
  {... 생략}

ルートに接続されていないコンポーネントであっても、withRouterをこのように使用します.
propsを転送して使用できます.
ああ.土地.いっぱい.
ルータバージョン6では、withRouterではなくローカルエリアネットワークを使用することをお勧めします.
次のプレゼンテーションでは、今日の例をversion 6に変更します.
ははは楽しいでもほほほ
ソース/リファレンス

https://react-router.vlpt.us/1/05.html[白鷺港]

https://v5.reactrouter.com/web/api/withRouter[ルータ共有]