🦊

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

2022/04/22に公開

JavaScript

React

tech

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

前提

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

手順

react-router-domをインストールします。

yarn add react-router-dom / npm install react-router-dom

各コンポーネントに対して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 />} />

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