ダッシュボードのレイアウトを使用しているプロジェクトがあるとします。

ログイン画面では、ダッシュボードが必要ないので、ログイン画面でダッシュボードのコンポーネントを利用しないようにします。

その場合、React Router のOutletを使用します。

react-router-dom からOuletをインポートしましょう。

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

MainLayout 関数を作成し、OutletDashboardで囲みます。

const MainLayout = () => (
  <Dashboard>
    <Outlet />
  </Dashboard>
)

Dashboardコンポーネントを使用したい場所に<Route element={<MainLayout />}>で囲みます。

function App() {
  const MainLayout = () => (
    <Dashboard>
      <Outlet />
    </Dashboard>
  )

  return (
    <BrowserRouter>
      <Routes>
        <Route index element={<Home />} />
        <Route element={<MainLayout />}>
          <Route path="/componenta" element={<ComponentA />} />
          <Route path="/componentb" element={<ComponentB />} />
        </Route>
      </Routes>
    </BrowserRouter>
  )
}

では、動作確認してみましょう。

image2

『ダッシュボードへ』をクリックし、ダッシュボードの画面へ遷移してみます。

image3

ダッシュボードの画面が開くことができました。

『ダッシュボードその 2 へ』をクリックすると、

image4

ダッシュボードその 2 画面が開きました。

ブログ一覧