React Routerでページ内容を変更したいが真っ白になる

Question

※プログラミングの学習を始めたばかりで質問形式や内容に不備不足がございましたら大変申し訳ございません。

質問背景

概要

React Routerを使用し、ヘッダーにリンクを置きたいが画面が真っ白になる。

作成したい内容としては、以下の通りです。

１、index.jsから Appコンポーネントの呼び出し
２、App.js内でHeaderコンポーネント、Homeコンポーネント、Footerコンポーネントを呼び出し
３、Headerコンポーネントに記載されているリンクから、HomeコンポーネントをReact Routerを使って、Aboutコンポーネント、Serviceコンポーネントに置き換えたいです。

ヘッダーにLink toを入れると全ての画面が真っ白になってしまい、対処方法がわかる方が居ましたらご教授お願いいたします。

コード

npx create-react-app my-app

を行った後に触れたファイルのコードを記載いたします。

index.jsとApp.jsの他、
作成したconponentsフォルダ直下にheader.jsx、home.jsx、footer.jsx、about.jsx、service.jsxというファイルがあります。

• index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

• App.js

import './App.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Header from './components/header';
import Home from './components/home';
import Footer from './components/footer';
import Service from './components/service';
import About from './components/about';

const App = () => {
  return (
    <div className="App">
        <header style={styles.header}>
            <Header />
        </header>
        <main style={styles.main}>
            <BrowserRouter>
                <Routes>
                    <Route path={"/"} element={<Home/>} />
                    <Route path={"/about"} element={<About/>} />
                    <Route path={"/service"} element={<Service/>} />
                </Routes>
            </BrowserRouter>
        </main>
        <footer style={styles.footer}>
            <Footer />
        </footer>
        
    </div>
  );
}

export default App;

const styles = {
  header: {
      height: 100,
      background: "#ddd",
  },
  main: {
      height: 300,
  },
  footer: {
      height: 100,
      background: "#ddd",
  }
}

• header.jsx

import React from 'react';
import { Link } from "react-router-dom";

const Header = () => {
  return (
    <>
      <h1>タイトル</h1>
      <div>
        <Link to={`/`}>Home</Link>
      </div>
      <div>
        <Link to={`/about/`}>About</Link>
      </div>
      <div>
        <Link to={`/service/`}>Service</Link>
      </div>
    </>
  );
};

export default Header;

• home.jsx

import React from 'react'

const Home = () => {
  return (
    <div>Home</div>
  )
}

export default Home;

• footer.jsx

import React from 'react'

const Footer = () => {
  return (
    <div>footer</div>
  )
}

export default Footer

• about.jsx

import React from 'react'

const About = () => {
  return (
    <div>about</div>
  )
}

export default About

• service.jsx

import React from 'react'

const Service = () => {
  return (
    <div>service</div>
  )
}

export default Service

Comments

[hoshi-takanori]

Link タグが BrowserRouter の中にないからでは。BrowserRouter はなるべく上の階層 (App のトップとか) で使いましょう。

[fukushima_ekubo]

早速のご回答ありがとうございます。

https://qiita.com/zaburo/items/082ec2b191aa466ef15f

こちらのサイトを参考にApp.jsの中に、BrowserRouterとパス"/"でDefaultを呼び出し、
Default.jsの中に、header、main、footerコンポーネントを入れました。

mainからRoutesで分岐させているのですが、今度はabout、serviceのパスでのみ真っ白になってしまいました。。

Answer 1

Appの返すJSXの中で、<Header />が <BrowserRouter>の囲む中に入っていないのが原因と思われます。スタイルの調整は後でやるとして、以下のように修正してみるとどうでしょう？

 const App = () => {
   return (
     <div className="App">
-      <header style={styles.header}>
-        <Header />
-      </header>
       <main style={styles.main}>
         <BrowserRouter>
+          <Header />
           <Routes>
             <Route path={"/"} element={<Home/>} />
             <Route path={"/about"} element={<About/>} />

追記

ちなみに一般的なWEBサイト（メニューバーがトップにあり、メニューを押すとページが遷移するようなサイト）を作成するとして、この構成（？）構築？で進めていっても問題なさそうでしょうか？？

についてですが、そのまま進めても作れないことはないですが、「こうしたほうがより良いのでは？」と個人的に思う修正案としては、

• App.js にはスタイルを書かないこと

を目標として、これの実現のために

• App の<main> タグの中にヘッダー<Header>があるのは不自然なので、<main> タグを一番外側に持つコンポーネントMainを作り、各画面のコンポーネントでこれを使用する

という修正が考えられます。たとえば以下のようにします。（適宜、スタイルを追加しています）

components/main.jsx

以下を新規作成します。

import React from 'react'

const Main = props => {
  return (
    <main style={styles.container}>
      {props.children}
    </main>
  )
}

export default Main;

const styles = {
  container: {
    height: 300,
    backgroundColor: '#dcf3ff',
    fontSize: '24pt',
    fontWeight: 'bold',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  }
};

About, Home, Service で上記のMainを使います。

components/about.jsx

import React from 'react'
import Main from "./main";

const About = () => {
  return (
    <Main>about</Main>
  )
}

export default About

components/home.jsx

import React from 'react'
import Main from "./main";

const Home = () => {
  return (
    <Main>Home</Main>
  )
}

export default Home;

components/service.jsx

import React from 'react'
import Main from "./main";

const Service = () => {
  return (
    <Main>service</Main>
  )
}

export default Service

footer.jsx と header.jsx にもスタイルを移動します。

components/footer.jsx

import React from 'react'

const Footer = () => {
  return (
    <div style={styles.container}>footer</div>
  )
}

export default Footer

const styles = {
  container: {
    height: 100,
    background: "#ddd",
  }
}

components/header.jsx

import React from 'react';
import { Link } from "react-router-dom";

const Header = () => {
  return (
    <div style={styles.container}>
      <h1>タイトル</h1>
      <div>
        <Link to={`/`}>Home</Link>
      </div>
      <div>
        <Link to={`/about/`}>About</Link>
      </div>
      <div>
        <Link to={`/service/`}>Service</Link>
      </div>
    </div>
  );
};

export default Header;

const styles = {
  container: {
    height: 100,
    background: "#ddd",
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-around',
  }
}

上記のように各コンポーネントを修正すると、以下のように App がすっきりします。

App.js

import './App.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Header from './components/header';
import Home from './components/home';
import Footer from './components/footer';
import Service from './components/service';
import About from './components/about';

const App = () => {
  return (
    <div className="App">
      <BrowserRouter>
        <Header />
        <Routes>
          <Route path={"/"} element={<Home/>} />
          <Route path={"/about"} element={<About/>} />
          <Route path={"/service"} element={<Service/>} />
        </Routes>
      </BrowserRouter>
      <Footer />
    </div>
  );
}

export default App;

表示させると、こんな感じになるかと思います。

ちなみに、styles にある container というプロパティ名は、そのコンポーネントの最も外側にある要素を示す名前としてしばしば使われます。

追記2

蛇足ですが、src/components ディレクトリに以下のような index.js

src/components/index.js

import About from "./about"
import Footer from "./footer"
import Header from "./header"
import Home from "./home"
import Service from "./service"

export {
  About, Footer, Header, Home, Service
}

を作成しておくと、App.js　で各コンポーネントをインポートする5行

import Header from './components/header';
import Home from './components/home';
import Footer from './components/footer';
import Service from './components/service';
import About from './components/about';

を以下のように書けます。

import {
  About,
  Footer,
  Header,
  Home,
  Service
} from './components';

Comments

[fukushima_ekubo]

ご回答ありがとうございます。
記載頂いたように変更したところ、希望通りの動きになりました！
スタイルもheader.jsxに記載して対応できました。

ちなみに一般的なWEBサイト（メニューバーがトップにあり、メニューを押すとページが遷移するようなサイト）を作成するとして、この構成（？）構築？で進めていっても問題なさそうでしょうか？？

ReactのSPAとしての機能がこれだと失われてしまう、など何か問題点がありましたら教えて頂けますと幸いです。

[退会済みユーザー]

コメントありがとうございます。回答に追記しました。

[fukushima_ekubo]

わわわ、、、ありがとうございます、、、目から鱗です。。。涙
修正しまして、載せて頂いた通りに動くことが確認できました！
お忙しいのに、ここまでして頂いて本当にありがとうございます！！
また何かあった際にはご相談させて頂けますと幸いです。