React Routerにおける<Outlet>の活用方法

React Router v6で導入された<Outlet>は、親コンポーネント内で子ルートをレンダリングするために使われる。親のレイアウトを保持しながら異なるページを表示できる。

Outletのない場合

  return (
    <Router>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Routes>
    </Router>
  );

Outletで表示先を指定する

以下の例では、アプリケーションのルートURL (/) にアクセスしたときにHomeコンポーネントが表示され、Homeコンポーネント内の<Outlet />の位置にAboutコンポーネントが表示される。

//App.js
//...
export const App = () => {
  return (
    <Router>
      <Routes>
        {/* Aboutをネストする */}
        <Route path="/" element={<Home />}>
          <Route path="about" element={<About />} />
        </Route>
      </Routes>
    </Router>
  );
}

//Home.js
import { Outlet } from 'react-router-dom';
//...
export const Home = () => {
  return (
    <div>
      <h1>Home Page</h1>
      {/* ここに<Outlet />があることで、この位置に子ルートのコンポーネントがレンダリングされる */}
      <Outlet />
    </div>
  );
}

注意: Aboutコンポーネントを表示するには、useNavigateを使用して適切にナビゲートする必要がある。

Outletに含めたくない場合はネストさせない

<Router>
  <Routes>
    <Route path="/" element={<Home />}>
      <Route path="about" element={<About />} />
    </Route>
    {/* Contentをネスト内に入れない */}
    <Route path="/content" element={<Content />} />
  </Routes>
</Router>