【React】ルーティング設定が正しいのにコンポーネントが表示されない

状況

上記の教材での学習中、画面遷移のためにReact Router v6を使用してルーティング設定を行ったところ、/usersにてHeaderOnlyを含む全てのコンポーネントが表示されない状態になった。

Router.jsx

import { BrowserRouter, Routes, Route } from "react-router-dom";
import { Top } from "../components/pages/Top";
import { Users } from "../components/pages/Users";
import { DefaultLayout } from "../components/templates/DefaultLayout";
import HeaderOnly from "../components/templates/HeaderOnly";

export const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<DefaultLayout />}>
          <Route index element={<Top />} />
        </Route>
        <Route path="/users" element={<HeaderOnly />}>
          <Route index element={<Users />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
};

原因・解決

既に気付いている人はいると思いますが、HeaderOnlyコンポーネントをnamed exportしていたのに括弧を忘れていました。

Router.jsx

import { BrowserRouter, Routes, Route } from "react-router-dom";
import { Top } from "../components/pages/Top";
import { Users } from "../components/pages/Users";
import { DefaultLayout } from "../components/templates/DefaultLayout";
- import HeaderOnly from "../components/templates/HeaderOnly";
+ import { HeaderOnly } from "../components/templates/HeaderOnly";


export const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<DefaultLayout />}>
          <Route index element={<Top />} />
        </Route>
        <Route path="/users" element={<HeaderOnly />}>
          <Route index element={<Users />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
};

このとき、なぜかCodeSandBoxの自動インポートが効かなくなっており、インポート文を手入力したのが徒となりました。

ちゃんとエラーも出ていたのですが、括弧なしでも大丈夫だと勘違いしており、スルーしてしまいました。

教訓

• （特に初学者のうちは）エラーメッセージが出たら素直な気持ちかつダメ元で対処すべし