React Router V6 팁+예제

최근에 React를 사용하여 개인 프로젝트를 진행하는 동안 모든 웹사이트에 필요한 가장 일반적인 것 중 하나인 라우팅에 대한 최신 정보를 많이 찾을 수 없다는 것을 깨달았습니다.

다음은 official documentation of React Router 이지만, React Router의 실제 응용 사례와 작고 유용한 팁을 제공하는 것이 좋겠다고 생각했습니다.

우선 React Router는 React 앱에 경로를 추가할 수 있는 라이브러리입니다. 일반적으로 웹 사이트에는 여러 페이지가 있습니다. 예를 들어 프로젝트를 홍보하기 위해 개인 웹사이트를 구축하고 있다고 가정해 보겠습니다. 메인 페이지에는 멋지고 전문적인 사진과 함께 자신에 대한 짧은 소개가 있습니다. 그런 다음 프로젝트 및 작업 경험의 포트폴리오를 작성하기 위해 별도의 페이지를 원할 수 있습니다. 사람들이 연락할 수 있도록 연락처 페이지를 추가할 수도 있습니다.

HTML에서는 일반적으로 각 페이지에 대한 스크립트가 있는 <a> 태그가 있는 다른 페이지에 대한 모든 링크를 포함하는 탐색 모음을 만듭니다. 그것도 멋지지만 React에는 경로를 구성하는 훨씬 간단한 방법이 있습니다. 바로 React Router를 사용하는 것입니다.

설치

먼저 다음 명령을 사용하여 React Router 라이브러리를 설치합니다.

npm install react-router-dom

항상 package.json 에서 종속성을 확인할 수 있습니다.
귀하의 package.json에는 react-router-dom가 있어야 합니다.

"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.3.0",

경로 추가

다음 단계는 경로를 추가하는 것입니다. 경로를 구성하는 방법에는 여러 가지가 있습니다. 모든 경로에 대한 파일을 만들 수 있지만 내 애플리케이션에는 많은 경로가 필요하지 않기 때문에 내 경로를 내 App.js 에 추가하기로 했습니다.

다음과 같이 가져옵니다BrowerRouter.

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'

저처럼 위의 내용을 App.js에 직접 가져온 경우 앱을 <Router>로 래핑합니다. 그런 다음 모든 Route 를 Routes 로 감싸십시오. 다음은 내가 한 방법입니다.

function App() {
  return (
    <Router>
      <Routes>
        <Route exact path="/" element={<Home />} />
        <Route exact path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

이제 두 페이지가 있습니다!
exact 구성 요소의 <Route /> prop은 React Router에 대한 혼동을 피하는 역할을 합니다. 이것은 무엇을 의미 하는가?

어떤 경로에도 exact가 없는 두 개의 다른 경로가 있다고 가정해 보겠습니다.

<Route path="/about/1" element={<AboutMe />} />
<Route path="/about/2" element={<AboutYou />} />

이로 인해 잠재적으로 부분 일치 문제가 발생할 수 있습니다. 예를 들어 URL/create/user/123은/create 또는/create/user/경로와 일치합니다. 따라서 버그의 여지를 피하기 위해 대부분의 경로에 exact를 포함하는 것이 좋습니다.
path 소품은 경로를 지정합니다. 예를 들어, /는 http://localhost:3000/와 같고 /about는 http://localhost:3000/about와 같습니다.
element 소품은 표시할 항목을 결정합니다. 내 / 경로에서 내 <Home /> 구성 요소와 내 /about 경로 내 <About /> 구성 요소를 표시하고 싶었습니다.

중첩 경로는 어떻습니까?
저에게는 게시물에 대해 서로 다른 링크가 있어야 했기 때문에 /posts/idNumber의 구조가 내 게시물 경로에 적합할 것이라고 생각했습니다.

<Route path="/posts" element={<Post />}>
  <Route path="/posts/:postId" element={<Post />} />
</Route>

자체 폐쇄 태그를 사용하는 대신 하위 경로를 상위 태그 안에 중첩하십시오.

연결

그렇다면 실제 연결은 어디에서 발생합니까?

실제 링크를 원하는 파일로 이동합니다.

수입품 Link .

링크를 만드세요!

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

....

<Link to={`/posts/${id}`}>See More</Link>

to 소품이 이 경우 경로입니다. ref 태그의 <a>와 같은 역할을 합니다.

하지만 링크에 정보를 전달하려면 어떻게 해야 할까요?

링크에 전달하려는 정보로 객체를 생성하기만 하면 됩니다. 그런 다음 state의 <Link /> 소품을 통해 개체를 전달합니다.
저는 소품을 전달해야 했기 때문에 이렇게 했습니다.

const restaurantData = {
        id: id,
        name: name,
        location: location,
        zipCode: zipCode,
        coordinates: coordinates,
        phone: phone,
        price: price,
        rating: rating
}

...

<Link to={`/posts/${id}`} state={restaurantData}>See More</Link>

그게 다야! 한 가지 팁은 웹앱을 실제로 구현하기 전에 경로를 계획하는 것입니다. 물론 원래 계획을 수정해야 하는 상황에 항상 직면하게 되지만, 웹 사이트의 일반적인 구조를 가지고 사전에 경로를 정렬하는 것이 항상 도움이 됩니다.