React, Bootstrapを使って他のページに飛ぶLinkを作りたい。

Question

React, Bootstrapを使って他のページに飛ぶNavbarを作っているのですが、うまく実装できません。
やりたいことはいたってシンプルでNavbarの各Linkボタンをクリックするとコンポーネントの内容　(Aboutを押せばAboutコンポーネント、Worksを押せばWorksコンポーネントの内容） を表示させるということですが以下のコードで実行すると画面が真っ白になります。

import React from "react";
import { Navbar, Nav, Container } from "react-bootstrap"
import { Routes, Route } from "react-router-dom"
import Works from "./Works"
import About from "./About";
import LandingPage from "./LandingPage";

const Links = () => {

  return (
    <>
      <Navbar bg="dark" variant="dark">
        <Container>
          <Navbar.Brand href="/">ABCDEFG</Navbar.Brand>
          <Nav className="me-auto">
            <Nav.Link href="/Works">My Works</Nav.Link>
            <Nav.Link href="/About">About</Nav.Link>
          </Nav>
        </Container>
      </Navbar>
      <Routes>

        <Route exact path="/" component={LandingPage} />
        <Route exact path="/Works" component={Works} />
        <Route exact path="/About" component={About} />
        
      </Routes>

    </>
  )


}

export default Links

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

Comments

[YSK85]

package.json

{
"name": "AAAAA",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.1",
"@testing-library/react": "^12.1.2",
"@testing-library/user-event": "^13.5.0",
"bootstrap": "^5.1.3",
"react": "^17.0.2",
"react-bootstrap": "^2.1.0",
"react-dom": "^17.0.2",
"react-router-bootstrap": "^0.26.0",
"react-router-dom": "^6.2.1",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

App.js

import React from 'react';
import './App.css';
import "bootstrap/dist/css/bootstrap.min.css";
import Links from './Component/Links';
import LandingPage from "./Component/LandingPage";
// import { BrowserRouter as Route, Routes} from "react-router-dom";
// import Works from './Component/Works';

function App() {
return (

<div className="App">

<Links />
<LandingPage />

</div>

);
}

export default App;

Answer 1

react-router では、普通のリンク <a href="/">ABCDEFG</a> だと SPA ではなく完全なページ遷移になってしまい、状態が引き継がれないので、Link コンポーネント を使って <Link to="/">ABCDEFG</Link> とする必要があります。

react-bootstrap の場合、Navbar.Brand や Nav.Link は通常 a タグが使われますが、これを react-router に対応させるには as={NavLink} を追加し、href を to に変更します。

-import { Routes, Route } from "react-router-dom"
+import { Routes, Route, NavLink } from "react-router-dom"

-          <Navbar.Brand href="/">ABCDEFG</Navbar.Brand>
+          <Navbar.Brand as={NavLink} to="/">ABCDEFG</Navbar.Brand>
           <Nav className="me-auto">
-            <Nav.Link href="/Works">My Works</Nav.Link>
-            <Nav.Link href="/About">About</Nav.Link>
+            <Nav.Link as={NavLink} to="/Works">My Works</Nav.Link>
+            <Nav.Link as={NavLink} to="/About">About</Nav.Link>
           </Nav>

または、react-router-bootstrap の LinkContainer を使う方法もあるようです。

+import { LinkContainer } from 'react-router-bootstrap'

-          <Navbar.Brand href="/">ABCDEFG</Navbar.Brand>
+          <LinkContainer to="/">
+            <Navbar.Brand>ABCDEFG</Navbar.Brand>
+          </LinkContainer>

画面が真っ白になるのは react-router v6 で仕様変更があったせいで、Route の component を element に変更する必要があります。
参考: react-router@v6で何が変わるのか - Qiita

-        <Route exact path="/" component={LandingPage} />
-        <Route exact path="/Works" component={Works} />
-        <Route exact path="/About" component={About} />
+        <Route exact path="/" element={<LandingPage />} />
+        <Route exact path="/Works" element={<Works />} />
+        <Route exact path="/About" element={<About />} />

---

コメント欄へのお返事

react-router の使い方に関して、根本的な誤解があるような気がします。

• BrowserRouter (Router) が App.js と Links.js の両方で使われてますが、基本的に最上位レベルで、1 回だけ使うべきものです。
• Links.js はたぶんヘッダーの部分だけを定義したいんだと思いますので、ここに BrowserRouter や Routes や Route や Works や About は不要なはず。
• App.js では、<Links /> は常に表示して、残りのコンテンツ部分に LandingPage か Works か About を切り替えて表示したいってことだと思うので、次のようにすれば良いのでは。

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Links /> {/* Links は無条件に表示される */}

        <Routes> {/* 現在の URL に応じて、LandingPage か Works か About のどれかが表示される */}
          <Route exact path="/" element={<LandingPage />} />
          <Route exact path="/Works" element={<Works />} />
          <Route exact path="/About" element={<About />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

こうすると、例えば / にアクセスすれば次のように表示され、

<div className="App">
  <Links />
  <LandingPage />
</div>

/Works にアクセスすれば次のように表示されると思います。

<div className="App">
  <Links />
  <Works />
</div>

Comments

[YSK85]

ご指摘いただきまして誠にありがとうございます。
ご指導いただいた方法を実行しましたが、未だ状況は改善されません。
一つ思ったのは、ただいま作業をしているのがLinks.jsというファイルとApp.jsファイルにLandingPageファイルをインポートしているのですが、これはLinks.jsだけにインポートするだけでいいのでしょうか？
インポートしていた理由はデフォルトでLandingPageを表示したいのと、他のページからABCDEFG部分を押した際ホーム画面に戻るようにした方からです。

追記の方にApp.jsファイルと一応package.jsonファイルの内容も載せておきます。

何卒よろしくお願いいたします。

[hoshi-takanori]

App.js を見ると BrowserRouter がコメントアウトされてますが、実際には App.js か index.js で使われてますか？ これがないと react-router は動かないはず…。
次に、App.js と Links.js の両方に LoadingPage があると LoadingPage が二重に表示されたりするのでは。
LoadingPage (や Works や About) をどっちで使うかは、実際にページの内容を表示するのをどこでやるかによりますが、App.js の方が自然な気はしますね。

[YSK85]

ご教示ありがとうございます。
どちらでもBrowserRouterは使っていませんでしたので、App.jsに<BrowserRouter>を加えました。
現在以下のようなコードになってます。また表示したいのはApp.js内でしたのでLink.js内のLoadingPageは削除しました。
エラーは出ていませんが、いまだ真白のままです。

App.js

import React from 'react';
import './App.css';
import "bootstrap/dist/css/bootstrap.min.css";
import Links from './Component/Links';
import LandingPage from "./Component/LandingPage";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

function App() {
return (

<div className="App">
<Router>
<Routes>
<Route>
<Links />
<LandingPage />
</Route>
</Routes>
</Router>
</div>

);
}

export default App;

Links.js

import React from "react";
import { Navbar, Nav, Container } from "react-bootstrap"
import { Routes, Route, BrowserRouter } from "react-router-dom"
import {LinkContainer} from "react-router-bootstrap"
import Works from "./Works"
import About from "./About";

const Links = () => {

return (
<>

<Navbar bg="dark" variant="dark">
<Container>
<LinkContainer to="/">
<Navbar.Brand>ABCDEFG</Navbar.Brand>
</LinkContainer>
<Nav className="me-auto">

<LinkContainer to="/Works">
<Nav.Link >My Works</Nav.Link>
</LinkContainer>

<LinkContainer to="/About">
<Nav.Link >About</Nav.Link>
</LinkContainer>

</Nav>
</Container>
</Navbar>

<BrowserRouter>
<Routes>
<Route exact path="/Works" element={<Works />} />
<Route exact path="/About" element={<About />} />
</Routes>
</BrowserRouter>

</>
)

}

export default Links

ご丁寧な指摘、誠にありがとうございます。

[YSK85]

今試したら動きました！
こちらの至らない質問の仕方にも丁寧かつ的確なご指導をしていただきまして
本当にありがとうございます！