React 동적 라우팅과 중첩 라우팅

React 동적 라우팅과 중첩 라우팅

링크를 통해서 상세페이지로 이동한다면 각 페이지마다 다른 데이터를 보여줘야 할 것이다.

Route를 통해서 경로를 새로 지정 해주어도 되지만 모든 상세 페이지마다 만들 수는 없다.

여기서 또 다른 라우트를 사용하는데 동적 라우트이다.

경로를 이렇게 /product-detail을 정의하는 대신 :를 사용하고 원하는 식별자를 입력한다.

/product detail/:productId 처럼 정의할 수 있다.

<Route path="/product-detail/:productId">
  <ProductDetail />
</Route>

이 동적 경로 기능을 활용하려면 URL에 입력된 구체적인 값에 액세스해야 한다.

그러기 위해서 react-router-dom에서 useParams를 import 한다.

UseParams를 호출하면 params 객체를 반환하고 key-value 쌍으로 param을 얻을 수 있다.

import { useParams } from "react-router-dom";

const ProductDetail = () => {
    const params = useParams();
  return (
    <section>
      <h1>product detail</h1>
      <p>{params.productId}</p>
    </section>
  );
};

export default ProductDetail;

switch와 exact

일반적으로 URL경로는 폴더구조를 따르는게 직관적이기 때문에 /product-detailed/:productId 보다는 /products/:productId 처럼 사용한다.

이럴 때 문제가 생길 수 있는데 라우트에서는 현재 경로와 일치하는 모든 라우트가 로드된다.

그러나 리액트 라우터에서 일치한다는 것은 정의된 경로로 시작된다는 것을 의미한다.

즉 /products와 /products /:productId 모두 /products로 시작하기 때문에 두 라우트가 모두 활성화 된다.

<Route path="/products">
  <Products />
</Route>

<Route path="/products/:productId">
  <ProductDetail />
</Route>

이 방식을 원할 때도 있겠지만 동시에 하나의 활성 경로만 필요할 때도 있다.

이 작업을 수행하기 위해서는 React-router-dom에서 제공하는 또 다른 컴포넌트인 Switch 컴포넌트를 사용할 수 있습니다

Switch 컴포넌트로 모든 라우트를 wrapping하여 사용한다.

그러면 이 경로 중 하나만 활성화된다.

경로의 시작 부분과 일치할 때 일치하는 항목을 찾으면 스위치로 인해 중단되고 다른 라우트를 확인하지 않고 일치하는 하나의 라우트를 렌더링한다.

<Switch>
  <Route path="/products">
    <Products />
  </Route>

  <Route path="/products/:productId">
  <ProductDetail />
  </Route>
</Switch>

그렇지만 여기에서는 우리가 원하는 결과를 얻을 수 없는데 상세페이지에 접근 할 수 없다.

한 가지 해결책은 순서를 변경하는 것이다.

제품 상세 페이지 라우트 다음에 제품 라우트를 옮기면 상세 페이지가 표시된다.

다른 방법으로는 라우트에 exact prop을 추가하는 것이다.

이것은 리액트 라우터에 정확히 일치하는 경우에만 일치 여부를 알려 주고 전체 경로와 일치할 때 렌더링한다.

<Switch>
  <Route path="/products" exact>
    <Products />
  </Route>

  <Route path="/products/:productId">
    <ProductDetail />
  </Route>
</Switch>

중첩 라우팅

기본 페이지가 아닌 페이지 내부에도 라우트가 필요한 경우가 있다.

이를 위해 다른 컴포넌트 내부에서 react-router dom의 라우트 컴포넌트를 사용하여 중첩된 라우트를 추가할 수 있다.

그리고 현재 활성화된 컴포넌트안에 있는 경우라면 react-router-dom에 의해 평가된다.

최상단 페이지에 경로를 추가하면 최상단 페이지가 활성화될 때 라우트가 평가된다.

최상단 페이지가 활성화되지 않은 경우라면 이 라우트는 평가되지 않는다.

더 구체적인 경로 일치가 있는 경우, 더 많은 콘텐츠를 렌더링할 수 있다.

import { Route } from "react-router-dom";
const About= () => {
  return (
    <section>
      <h1>About</h1>
      <Route path="/about/me">
        <p>About me</p>
      </Route>
    </section>
  );
};

export default About;

Redirect

마지막으로 사용자를 리디렉션 할 수 있는 Redirect 컴포넌트이다.

렌더링이 되면 그 이름이 의미하는 것처럼 지정한 경로로 리디렉션 한다.

<Route path="/" exact>
  <Redirect to="/home"/>
</Route>