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

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

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

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

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

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

//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 />} />

//TodoRegister.jsx　　
import { Link } from "react-router-dom"
export const TodoRegister =　() => {
  return (
   <Link to={"/todolist"} state={{ state: incompleteTodos }}>
     Todo一覧へ
   </Link>
  )
}

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)
  }, [])