React 라우터를 사용하여 핸들러 구성 요소에 소품 전달

1. React Router를 사용하여 소품을 다른 구성 요소로 전달
2. 결론

react-router는 한 웹 페이지를 다른 웹 페이지에 연결하는 주요 기능을 수행합니다. 다중 페이지 앱을 빌드할 때 react-router를 적용하여 페이지를 함께 연결합니다.

그러나 React 라우터는 다른 기능을 수행합니다. 또한 한 링크에서 다른 링크로 상태 또는 props{property}를 전달할 수 있습니다.

이 접근 방식을 사용하면 하나의 링크를 사용하여 다른 링크의 상태를 제어하거나 이전 페이지의 전체 콘텐츠를 렌더링하지 않고 한 페이지의 요소 일부를 다른 페이지와 공유할 수 있습니다.

React Router를 사용하여 소품을 다른 구성 요소로 전달

예를 들어 React Router를 사용하여 페이지 4 구성 요소에서 페이지 5 구성 요소의 URL을 조정하는 소품을 전달하려고 합니다.

새 프로젝트 폴더를 만들고 npm install react-router를 사용하여 React Router를 설치한 다음 npm install react-router-dom을 사용하여 라우터 DOM을 설치합니다. 그런 다음 폴더를 만들고 pages라는 이름을 지정한 다음 Page4.js 및 Page5.js라는 두 개의 구성 요소를 만듭니다.

그런 다음 App.js 파일을 다음과 같이 코딩하는 것으로 시작합니다.

코드 스니펫 - App.js:

import React from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import Page4 from './pages/Page4';
import Page5 from './pages/Page5';

function App(props) {
  return (
    <BrowserRouter>
    <Routes>
      <Route exact path="/" element={<Page4/>} />
      <Route exact path="/page4" element={<Page4 />} />
      <Route path="/page5/:type" element={<Page5/>} />
      </Routes>

    </BrowserRouter>
  );
}
export default App;

여기에서 두 구성 요소를 App.js에 연결한 다음 Page5 페이지가 :type 속성을 사용하여 모든 유형의 소품을 허용하도록 합니다.

그런 다음 Page4.js 파일에 이 코드를 입력합니다.

코드 스니펫 - Page4.js:

import React from 'react';
import { Link } from 'react-router-dom';

function Page4(props) {
    return (
        <div>
            <h1>Title of Page 4</h1>
            <hr />
            <Link to={{
                pathname: "/page5/parameter-data",
                state: { stateParam: true }
            }}>Move to Next Page</Link>
        </div>
    );
}

export default Page4;

Page4를 Page5에 연결하는 동안 URL을 업데이트하는 상태도 추가했습니다. 일반적으로 http://localhost:3000/page5만 표시되지만 이제 Page4에서 추가한 대로 http://localhost:3000/page5/parameter-data가 표시되어야 합니다.

그런 다음 Page5에서 다음과 같이 Page4에 다시 연결하는 코드를 만듭니다.

코드 스니펫 - Page5.js:

import React from 'react';
import { Link, useParams, useLocation } from 'react-router-dom';

function Page5(props) {
    const { type } = useParams();
    return (
        <div>
            <h1>Title of Page 5</h1>
            <hr />
            <Link to={"/page4"}>Move to Prev Page</Link>
        </div>
    );
}

export default Page5;

또한 Page4에서 소품을 수신하기 위해 const {type}을 추가했습니다.

출력:

결론

이 접근 방식은 건초더미 같은 코드 안에서 잃어버리고 싶지 않은 눈에 띄는 기능이나 소품을 추가하려는 경우 효율적일 수 있습니다. 따라서 별도의 구성 요소를 만들고 prop 또는 state를 전달하는 동안 원하는 페이지에 연결할 수 있습니다.