react-router-domでネストしたルーティングを実現した

Question

ネストしたルーティングを実現したい

公式ドキュメントやStackOverflowを読みながら、6系はSwitchコンポーネントではなく、Routesコンポーネントを使用して、ルーティングを実現することできるみたいだということまでは把握しました。

<br/>

RouteコンポーネントでネストしたContentDetailAとContentDetailBが返却されず、困っています。

import { BrowserRouter, Link, Routes, Route } from "react-router-dom";

import { Home } from "./Home";
import { About } from "./About";
import { Content } from "./Content";
import { ContentDetailA } from "./ContentDetailA";
import { ContentDetailB } from "./ContentDetailB";

export const App = () => {
  return (
    <BrowserRouter>
      <div className="App">
        <Link to="/">Home</Link>
        <br />
        <Link to="/about">About</Link>
        <br />
        <Link to="/content">Content</Link>
        <br />
      </div>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/content" element={<Content />}>
　　　　　　　　　　　　　　　　　　　　　// 以下2行ののコンポーネントが返却されません
          <Route path="content/detailA" element={<ContentDetailA />} />
          <Route path="content/detailB" element={<ContentDetailB />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
};

"dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.0.1",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },

<br/>

試したこと

• 他のコンポーネントも同様にネストしてみたところ別のコンポーネントでも同様のコンポーネントが返却されない現象が起きました。つまりは、今回の2行のコンポーネントの問題ではなくルーティング関係の書き方に原因があると思います。
• Outletコンポーネントを使用したのですが、親コンポーネントの情報と一緒に表示されてしまい、今回のような１コンポーネントで１ページを出力する際には使用できないと考えました。(使い方が間違えていたらご指摘お願いいたします。)

Comments

[hoshi-takanori]

いまいちやりたことが分かりませんが、ContentDetailA が Content と独立した内容なら、そもそもネストさせる必要はないのでは…。

Answer 1

勉強不足で理解できていないと感じたため、一旦締めます