React-Bootstrap 他ページに遷移させるとHome＋遷移後の両方のページ内容が表示されてしまう。

Question

React, Bootstrapを使って複数のページ間で相互に画面遷移させているのですが、
Home→他ページに遷移させた時、Homeの内容に遷移後のページの内容が足されて表示されてしまいます。
他ページに遷移した時は、そのページの内容だけを表示させたいのですが、うまくいきません。
他ページからHomeに戻った時は、Homeだけの内容になっています。

画面構成は以下になります。
Homeページ : App.js
Worksページ : Works.js
Aboutページ : About.js
ナビゲーション：Links.js * コンポーネントにしてApp.jsに入れています。
▼ソース App.js

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './css/app.css';
import { 
  Container,
  Row,
  Col,
  } from 'react-bootstrap';
  import {BrowserRouter, Route, Routes } from "react-router-dom";
  import Links from './Links';
  import Works from './Works';
  import About from './About';
 
  
function App() {
  return (
    <div >
<Container fluid>
  <Row>
    <Col>
      <div>
      <BrowserRouter>
        <Links /> 
         <Routes> 
        <Route exact path="/" />
          <Route exact path="/Works" element={<Works />} />
          <Route exact path="/About" element={<About />} />
       </Routes> 
       </BrowserRouter>
      </div>
   
    </Col>
  </Row>
</Container>
<Container >
    <Row style={{margin: '30px'}}  className="justify-content-md-center">
    <Col>
    {<p>これはHomeの内容です。</p>}
    </Col>
  </Row> 
</Container>
</div>
  );
}

export default App;

▼ソース Links.js

import React from "react";
import { 
  Navbar, 
  Nav,
  Container } from 'react-bootstrap';
import {LinkContainer} from "react-router-bootstrap";


const Links = () => {

  return (
    <>
      <Navbar bg="dark" variant="dark">
        <Container>
          <LinkContainer to="/">
            <Navbar.Brand>HOME</Navbar.Brand>
          </LinkContainer>
         
          <Nav className="me-auto">
            <LinkContainer to="/Works">
            <Nav.Link >Works</Nav.Link>
            </LinkContainer>
            <LinkContainer to="/About">
            <Nav.Link >About</Nav.Link>
            </LinkContainer>
          </Nav>
        </Container>
      </Navbar>
    </>
  )
}

export default Links
コード

▼画面表示　
＊Home, 他ページ→Home

＊Home→Works遷移　（Home→Aboutも同様）

下記リンクを参考にいろいろ試してみましたが、だめでした。
https://teratail.com/questions/n8xhdncizxv1vo

助言をいただければと思います。
なにとぞ、よろしくお願いします。

Comments

[hoshi-takanori]

画面遷移で切り替わるのは Routes の中だけです。Home の内容を含め、その外側にあるものは常に表示されます。

[退会済みユーザー]

なるほど、わかりました。
画面遷移するごとに表示の内容も変える場合は、この書き方では不十分ということですね。

[退会済みユーザー]

@hoshi-takanoriさん
ヒントありがとうございます！無事解決しました！

Answer 1

下記の方法で解決しました。
①まず、Home.jsを新たに作る。
▼Home.js

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import './css/app.css';
import { 
  Container,
  Row,
  Col, } from 'react-bootstrap';
 

function Home() {
  return (
    <div >
     <Container >
  <Row style={{margin: '30px'}}  className="justify-content-md-center">
    <Col > 
     {<p>これはHomeの内容です。</p>}
    </Col>
  </Row> 

</Container>
    
  </div>
  );
}

export default Home;

②次に、App.jsの、Home記述部分を削除する。

③App.jsに以下を追加、および修正

import Home from './Home';

<Route exact path="/" element={<Home />} />

http://localhost:3000/ブラウザで確認したところ、デフォルトでHomeコンテンツのみ、
Works,About遷移した時はUrlとコンテンツがそれぞれ切り替わり、
その時Homeのコンテンツは表示されず、個々のコンテンツ（これはWorks／Aboutの内容です。）が表示されました。