Reactで狙いの動作ができない

Question

React初心者です。
/listにHello world!を表示させたいのですが、表示できなく困っております。
HeaderとFooterは表示されております。エラーや警告は何も出ていないです。

以下のバージョンでローカルで動作確認しています。
node 16.13.0
npm 8.1.0
react 17.0.2

該当のソースコード

App.js

import React from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import { RootPage } from "./pages/Root.js";
import { ListPage } from "./pages/List.js";


function Header() {
    return (
        <section className="hero is-warning">
            <div className="hero-body">
                <div className="container">
                    <h1 className="title">
                        Header
                    </h1>
                </div>
            </div>
        </section>
    );
}

function Footer() {
    return (
        <footer className="footer">
            <div className="content">
                <p className="has-text-centered">
                    Footer
                </p>
            </div>
        </footer>
    );
}

export class App extends React.Component {

    render() {
        return (
            <Router>
                <Header />
                <Routes>
                    <Route path="/" element={RootPage} />
                    <Route path="/list" element={ListPage} />
                </Routes>
                <Footer />
            </Router>
        );
    }
}

List.js

import React from "react";


export class ListPage extends React.Component {
  hello() {
    return <p>Hello world!</p>
  }

  render() {
    return (
      this.hello()
    )
  }
}

補足情報（FW/ツールのバージョンなど）

他にも改善点（classやfunctionの書き方など）がありましたら教えていただきたく思います。

Comments

[hoshi-takanori]

/list 画面にはどうやって遷移しますか？

[yslius]

URLに直接打ち込んで遷移させています。ローカルでの動作確認のため、http://localhost:3000/listと打ち込んでます。

[hoshi-takanori]

element={ListPage} じゃなくて element={<ListPage />} では。
https://reactrouter.com/docs/en/v6/getting-started/overview

[yslius]

element={<ListPage />} にしたらHello world!が表示されました。
ありがとうございました！

Answer 1

これでどうでしょうか↓

RootPageをexactを追加して完全一致に変更

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

Comments

[yslius]

exactを追加してみましたが、挙動は変わりませんでした。
exactで完全一致が指定できるのですね。勉強になります。