React Router v6 の使い方

React
2024.02.09

React Router について

公式 : https://reactrouter.com/en/main

Reactで画面遷移を行うのに必要なライブラリ。

初めての方は下記チュートリアルが参考になります。

Tutorial v6.22.0 | React Router
reactrouter.com

インストール

npm i react-router-dom

使い方

基本

import { createBrowserRouter } from "react-router-dom";

export const router = createBrowserRouter([
     {
        path: "/",
        element: <IndexPage />,
      },
      {
        path: "/create",
        element: <CreatePage />,
      },
      {
        path: "/edit/:id",
        element: <EditPage />,
      },
      {
        path: "/detail/:id",
        element: <DeletePage />,
      },
      {
        path: "/register",
        element: <RegisterPage />,
      },
      {
        path: "/login",
        element: <LoginPage />,
      },
]);

「createBrowserRouter」内にpathとコンポーネントを指定する。

上記の例だと、/create にアクセスされると CreatePageコンポーネントが表示される。

次に、ルートコンポーネントに上記の通り設定したrouterを読み込む。

import { RouterProvider } from "react-router-dom";
import { router } from "./routes/router";


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


export default App;

これで基本的な設定は完了。

動的ルーティング

      {
        path: "/edit/:id",
        element: <EditPage />,
      },

のように、先頭にコロンを指定すると動的にできる。

/edit/1　や　/edit/2

のようなページに対応できる。

ページ遷移

useNavigate フックを使用する。

useNavigate v6.24.1 | React Router
reactrouter.com
import { useNavigate } from "react-router-dom";

function Form() {
  const navigate = useNavigate();

  const onSubmit = async (data) => {
      console.log(data);
      navigate('/dashboard');
  };
}

navigateの引数に、遷移先のパスを指定する。

PR