🦊

Reactにおける画面遍移時のデータの受け渡しについて

2022/04/21に公開約2,700字

Reactで画面遷移後、データをPropで渡すのですが、その具体的な方法を記載します。

前提


  • Linkコンポーネントを利用
  • react-router-dom(V6)による画面遷移の実装

手順


  1. react-router-domをインストールします。
yarn add react-router-dom / npm install react-router-dom
  1. 各コンポーネントに対してreact-router-domを使ってルーティングを実装する。
    画面A→画面Bへ遍移する際、Linkコンポーネントを利用しますが、react-router-domのルーティングを実装します。

■App.jsx → 全ての基盤になるコンポーネント

//App.jsx
import { Router } from "./router/Router"
import { BrowserRouter } from "react-router-dom"

react-router-domが提供しているRouter、BrowserRouterコンポーネントをimportして以下の様に利用します。

//App.jsx
return (
    <div>
      <BrowserRouter>    {/* //BrowserRouterコンポーネントで囲む */}
        <Router />         {/* //Router.jsxを呼び出す。 */}
      </BrowserRouter>  {/* //BrowserRouterコンポーネントで囲む */}
    </div>
  )

ここから各コンポーネント事にルーティングをコーディングしていきますが、ここではTodoList.jsxを例にとって記載します。
まずはTodoList.jsxのルーティングコンポーネントを記載していきます。

//TodoListRoutes
import { TodoList } from "../component/TodoList"
import { Page404 } from "../component/Page404"

export const TodoListRoutes = [
  { path: "", exact: true, children: <TodoList /> },
  { path: "*", exact: false, children: <Page404 /> },
]

意味としては、
http://(サーバ名)/todolist                          ・・・TodoList.jsxを表示
http://(サーバ名)/(todolist以外の文字列)  ・・・404.jsxを表示
となります。合わせて全体のルーティングのコンポーネント(Router.jsx)も作ります。

//Router.jsx
import React from "react"
import { Route, Routes } from "react-router-dom"
import { TodoListRoutes } from "./TodoListRoutes"

export const Router = () => {
  return (
    <Routes>
      <Route exact path="" element={<TopPage />} />
       <Route path="todolist">
 //map関数を使って、TodoListRoutesのオブジェクトを展開する。(各ルーティングを記載)
        {TodoListRoutes.map((route3) => (
          <Route
            key={route3.path}
            exact={route3.exact}
            path={`${route3.path}`}
            element={route3.children}
          />
        ))}
      </Route>
      <Route path="*" element={<Page404 />} />

  1. Linkコンポーネントを使ってstateを渡す。
    上記の様にルーティングを設定した後、Linkコンポーネントでstateを渡します。以下の例はTodoRegister.jsxからTodoList.jsxへデータを渡すと仮定します。
  • データを渡すコンポーネント(TodoRegister.jsx)
//TodoRegister.jsx  
import { Link } from "react-router-dom"
export const TodoRegister = () => {
  return (
   <Link to={"/todolist"} state={{ state: incompleteTodos }}>
     Todo一覧へ
   </Link>
  )
}
  • データを受け取るコンポーネント(TodoList.jsx)
import { useState } from "react"
import { useLocation } from "react-router-dom"
export const TodoList = () => {
// TodoRegister.jsxのStateをuseLocationで受け取る。
  const { state } = useLocation() 
  const [todoLists, setTodoLists] = useState([])

// 画面変移時に一度だけ、TodoListのStateを更新する。
// その為UseEffectの第二変数に[]を記載。この様にしないと、無限レンダリングが発生
  useEffect(() => {
    setTodoLists(state.state)
  }, [])

この一連の処理で、TodoRegister.jsxのstateをのTodoList.jsxのstateであるtodoListsに格納(変数に渡す)ことができます。

Discussion

ログインするとコメントできます