質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%

解決済

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

dev-milk
dev-milk

総合スコア27

1回答

0評価

0クリップ

168閲覧

投稿2022/05/04 13:02

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

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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

hoshi-takanori

2022/05/04 17:05

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

2022/05/05 03:07

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

2022/05/05 03:17

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

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る