React-router-dom을 사용하여 React 웹 앱을 위한 동적 URL 경로 생성

최근 프로젝트에서 동적 URL 경로를 생성하고 싶었습니다. 보시다시피here 각 물고기에는 자체 페이지가 있고 각 페이지에는 물고기 이름을 기반으로 하는 자체 동적 URL이 있습니다. 나는 그것을 하는 방법을 찾기 시작했지만 놀랍게도 그것에 대한 많은 문서가 없었고 그것을 하는 방법을 보여주는 튜토리얼은 그것에 대해 상당히 모호했습니다.

내 앱에서 어떻게 했습니까? 이를 달성하기 위해 내 앱에서 react-router-dom v6를 사용했습니다. 따라서 이 튜토리얼은 여러분이 react-router-dom에 어느 정도 익숙하다고 가정하고, react-router-dom이 대부분의 어려운 작업을 대신해 주기 때문에 이것은 상당히 간단한 튜토리얼이라고 가정합니다.

작동 방식을 살펴보겠습니다.

여기에서 fishStore 배열을 매핑하는 동안 모든 것을 래핑합니다.
모든 카드로 연결되는 링크가 있는 개별 카드 구성 요소
물고기의 개별 정보 페이지.

{
  fishStore.map((fishInfo, index) => {
    return (

      <Link

/* Below is the page path with an interpolated string where 
fishInfo.fishPath is the dynamic bit which is being used to 
generated each page's unqiue url from the array the pre-fixed main 
path stays the same */

        to={`/fish-info/${fishInfo.fishPath}`}
        state={{ fishInfo }}
        key={index}
      >
        <Card
          source={fishInfo.fishImageSrc}
          altText={fishInfo.fishImageAlt}
          fishName={fishInfo.fishName}
          fishScientificName={fishInfo.fishScientificName}
          key={index}
        />
      </Link>
    );
  });
}

라우터에서 동적 경로 변수 할당:

라우터에서 동적 경로를 추가해야 합니다.

<Router>
  <StyledOuterContainer>
    <Routes>
      <Route path="/" element={<Home />} />

/* Below we are adding the Route path which goes to the 
<FishInfo/> component for rendering each fish's individual page */

      <Route path="/fish-info/:fish" element={<FishInfo />} />
      <Route path="*" element={<Exist />} />
    </Routes>
  </StyledOuterContainer>
</Router>;

경로 경로 문자열의 동적 변수:

콜론 : 기호가 앞에 붙은 경로 경로의 :fish에 주의하십시오. 이것은 이 부분이 동적으로 변경될 수 있고 "/fish-info/"가 동일하게 유지되는 모든 페이지의 기본 문자열임을 react-router-dom에 알려주기 때문에 중요합니다. 이 콜론 접두사 문자열은 원하는 이름이 될 수 있습니다.

 <Route path="/fish-info/:fish" element={<FishInfo />} />

이제 react-router-dom을 사용하여 개별 페이지에 대한 동적 URL 생성을 완료했습니다.