React의 화면 순회 이동에 대한 데이터 교환

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로 빙글빙글 돌 때 링크 구성 요소를 사용하여react-router-dom의 경로를 실현한다.

■ App.jsx→모든 베이스 구성 요소

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

react-router-dom에서 제공하는 로터, Browser 로터 구성 요소 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를 전달합니다.다음 예는 Todo Register입니다.jsx에서 TodoList까지.jsx에 데이터를 보내는 것을 가정합니다.

데이터를 전달하는 구성 요소(Todo Register.jsx)

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

데이터를 받는 구성 요소 (TodoList.jsx)

이러한 일련의 프로세스에서 Todo Register는jsx state의 TodoList입니다.jsx state로 저장할 수 있는 todoLists (변수에 전달).