React Router Dom v6を使用した動的なレイアウトとルート

動的なレイアウトの作成: React Router Dom v6では、レイアウトのルーティングを簡単にカスタマイズすることができます。例えば、特定のルートにアクセスした場合に異なるレイアウトを表示することができます。以下は、動的なレイアウトの例です。

import { BrowserRouter, Routes, Route } from 'react-router-dom';
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<DefaultLayout />} />
        <Route path="/dashboard" element={<DashboardLayout />} />
      </Routes>
    </BrowserRouter>
  );
}
function DefaultLayout() {
  return (
    <div>
      <header>Default Header</header>
      <main>Default Content</main>
      <footer>Default Footer</footer>
    </div>
  );
}
function DashboardLayout() {
  return (
    <div>
      <header>Dashboard Header</header>
      <main>Dashboard Content</main>
      <footer>Dashboard Footer</footer>
    </div>
  );
}

ネストされたルートの作成: React Router Dom v6では、ネストされたルートを作成することができます。これにより、コンポーネントの階層構造を表現し、より複雑なアプリケーションを構築することができます。以下は、ネストされたルートの例です。

import { BrowserRouter, Routes, Route } from 'react-router-dom';
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/dashboard" element={<Dashboard />}>
          <Route path="/dashboard/profile" element={<Profile />} />
          <Route path="/dashboard/settings" element={<Settings />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}
function Home() {
  return <h1>Home</h1>;
}
function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Routes>
        <Route path="/dashboard/profile" element={<Profile />} />
        <Route path="/dashboard/settings" element={<Settings />} />
      </Routes>
    </div>
  );
}
function Profile() {
  return <h2>Profile</h2>;
}
function Settings() {
  return <h2>Settings</h2>;
}

ルートパラメータの取得: React Router Dom v6では、URLのパラメータを簡単に取得することができます。以下は、ルートパラメータを取得する例です。

import { BrowserRouter, Routes, Route, useParams } from 'react-router-dom';
function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/user/:id" element={<User />} />
      </Routes>
    </BrowserRouter>
  );
}
function User() {
  const { id } = useParams();
  return <h1>User ID: {id}</h1>;
}

以上がReact Router Dom v6を使用して動的なレイアウトとルートを実装する方法のいくつかの例です。これらの例を参考にして、自分のReactアプリケーションに適用してみてください。