React Router のルーティングが上手く行きません

Question

数ある質問から、こちらを見ていただき、ありがとうございます。

やってること

React Router を使って ルーティング を設定しています。

困っていること

以下のソースコードで、ルーティングを設定すると
URLでの反映で(https://~~~~~/about)とルーティングができています。
しかし、手動でリロードをしないと、ページ画面が反映されません。

なので、ソースコードについて アドバイス・ご指摘 があれば教えてください。
また、他に必要なソースコードがあればお見せします。

よろしくお願いします。

App.js

import React from 'react';
import { Router, Route, Switch } from 'react-router-dom';
import { Home, About} from './components/index';
import Error from "./components/Error/404";
import history from './history';
import HeaderBody from './components/Common/HeaderBody';

const App = () => {
return(
<Router history={history}>
<div>
<HeaderBody />
  <Switch>
    <Route exact path='/' component={Home} />
    <Route path='/About' component={About} />
    <Route component={Error} />
   </Switch>
 </div>
 </Router>
);
}

export default App;

HeaderBody.js

import React, { useEffect } from 'react';
import Logo from '../../assets/img/src/logo.png';
import { makeStyles } from '@material-ui/core/styles';
import { BrowserRouter, Link } from 'react-router-dom';
  
    return(
<header className={classes.header}>
 <BrowserRouter>
  <h1 className={classes.logoStyle}><Link to='/'><img className={classes.logo} src={Logo} 
 alt="portfolio"/></Link></h1>

 <div className={classes.lists} id="nav-ul">
 <div className={classes.list}>
 <p><Link to='/About'>アイコン</Link></p>
 <p><Link to='/About'><span>About</span></Link></p>
 </div>
 </div>
</BrowserRouter>
   </header>

    )
}
export default HeaderBody;

history.js

import { createBrowserHistory } from 'history';

export default createBrowserHistory();

Comments

[hoshi-takanori]

HeaderBody.js に BrowserRouter は不要で、App.js の Router を BrowserRouter にすべき (history は不要) では。
https://qiita.com/koja1234/items/486f7396ed9c2568b235

[Anana]

ありがとうございます。
試して見ます。