【React学習】〜useLocationとuseNavigate〜

React

　ページを変えたり、遷移先のページに値を渡したりするのに便利なのがuseLocationとuseNavigateです。

react-router-domライブラリ

　どちらのHookも「use」から始まるので、Reactが提供するHookのように思えますが、これらはreact-router-domというライブラリが提供する「カスタムフック」です。（カスタムフックについては、後でまとめてみようと思います）

　Reactアプリにおけるルーティング（ページとURLの関係）を管理してくれるライブラリで、BrowserRouter、Routes、Routeといったコンポーネントを用意してくれています。

<BrowserRouter>
  <Routes>
    <Route path="/user/" element={<UserPage />}>
      <Route path="message" element={<MessagePage />}>
      <Route path="info" element={<InfoPage />}>
    </Route>
    <Route path="/dashboard/*" element={<Dashboard />} />
  </Routes>
</BrowserRouter>

　上の例では、/user/にアクセスするとUserPageが表示され、/user/messageにアクセスするとMessagePageが表示されることになります。
　/dashboard/*というパスは、*に入るパスによってページを切り替えることができるようにする指定方法です。Dashboardの中にさらにRoutesを記述する必要があります。

useNavigate

　このように指定したパスに遷移させるのがuseNavigateです。

const navigate = useNavigate();

const handler = () => {
  navigate("/user/", state };
}

　useNavigateによって遷移するための関数navigateを作成し、navigateの引数として「パス」と「state」を渡します。するとページの遷移が行われ、遷移先のページでstateを使うことができるようになります。

useLocation

　遷移先のページではuseLocationを使って渡されたstateを読み取ることができます。

const state = useLocation().state;

　stateには何でも渡せます。やったことはないですが、関数も渡せそうです。

　useLocationは、そのページのパスも取得することができます。

const path = useLocation().pathname

　使ったことはありませんが、どのページからやってきたのかも分かるそうです。

Outlet

　先ほど上に書いたルーティングの例で、/user/ルートの子要素にあたるルートの要素をOutletというコンポーネントに表示させることができます。

const UserPage = () => {
  return (
    <div>
      <Header />
      <Outlet /> //この部分がパスによって切り替わる
    </div>
  )
}

　これを使うと、共通のヘッダーを持ちながら、パスによってメインコンテンツの部分を切り替えることが簡単にできるようになります。Outletに表示されるコンポーネントがさらにOutletを持つ、なんてこともできます。

コメント