🐥

React Router v7での<Outlet />の使い方

に公開
React
TypeScript
Web
初心者向け
React Router
tech

はじめに

※備忘録です

<Outlet />とはReact Routerで親コンポーネントにマッチする子コンポーネントを表示するためのものです。
コンテンツの一部(親)を変えずに一部のみ(子)を変更したいときに使います。

使い方

v6以前と基本的には変わらないようでしたが、ルートの部分の書き方は変わっているようでした
element: に親のルーターを入れ、childrenに子を書きます。
routeはわかりやすいように全て{プロジェクト名}/src/routerに入れています(下記のコードでは相対パスになっています)。

App.tsx
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import Parent from "./router/Top";
import Main from "./router/Main";
import Sub1 from "./router/Sub1";
import Sub2 from "./router/Sub2";

function App() {
  const router = createBrowserRouter([
    {
      element: <Parent />,
      children: [
        { path: "/", element: <Main /> },
        { path: "/sub1", element: <Sub1 /> },
        { path: "/sub2", element: <Sub2 /> },
      ],
    },
  ]);

  return (
      <RouterProvider router={router} />   
  );
}

export default App;
Parent.tsx
import { Link, Outlet } from "react-router-dom";

function Parent() {
  return (
    <>
      <p>Parent</p>
      <Link to="/">Main</Link>
      <br />
      <Link to="/sub1">Sub1</Link>
      <br />
      <Link to="/sub2">Sub2</Link>
      <br />
      <Outlet />
    </>
  );
}

export default Parent;
Main.tsx
function Main() {
  return (
    <>
      <p>Main</p>
    </>
  );
}

export default Main;
Sub1.tsx
function Sub1() {
  return (
    <>
      <p>Sub1</p>
    </>
  );
}

export default Sub1;
Sub2.tsx
function Sub2() {
  return (
    <>
      <p>Sub2</p>
    </>
  );
}

export default Sub2;

それぞれLinkを押すとChildren部分のみが遷移します。

おわりに

間違っていたら教えてください。

参考

https://reactrouter.com/api/components/Outlet

Discussion