[React] react router v6 중첩 라우팅, 리다이렉트, 404 페이지

그동안 프로젝트에서 5버전만 쓰다가 새로운 프로젝트를 세팅하면서 6.3.0 버전을 적용해보려고 한다.

이 프로젝트에서 필수로 가져가야할 것은 중첩라우팅, 리다이렉트, 에러페이지 이므로 이것을 중점으로 포스팅 하겠다.

 

1. 설치

yarn add react-router-dom

 

2. index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

 

3. App.js (기본 규칙)

위에서 Router을 감쌌기 때문에 여기서는 Routes안에 Route들만 넣어주면 된다.

여기서 Router로 또 감싸면 하나만 넣으라고 에러가 날 것. 

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

 <Route>컴포넌트는 다음과 같이 사용한다.

<Route path="주소규칙" element={보여 줄 컴포넌트 JSX} />

5버전에서는 Switch를 사용했지만 6버전에서는 Routes를 사용한다.

 

// v5
<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/intro" component={Intro} />
  <Route path="/blog" component={Blog} />
</Switch>
​
// v6
<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/intro" element={<Intro />} />
  <Route path="/blog" element={<Blog />} />
</Routes>

 

 

4. 없는 url (404페이지)

<Route path="*" element={<Error404 />} />

가장 상위의 라우팅 컴포넌트에 이것을 적어주었다.

 

 

5. 리다이렉트

 <Route
    path="/"
    element={
      <Navigate
        replace
        to="가려고 하는 url"
      />
    }
 />

5버전에서는  Redirect를 사용했지만 6버전에서는 Navigate로 url을 돌려주면 된다. 

아래에서 중첩 라우팅을 사용할 경우와 함께 사용하는 방법을 자세히 설명해보겠다. 

 

 

6. 중첩 라우팅 + 리다이렉트

중첩 라우팅을 할 경우 아래 코드와 같이 주소 뒤에 *을 붙이면 된다.

<Route path="/egg/*" element={<Egg />} />

 

나의 경우 4뎁스까지 중첩 라우팅을 사용했다. 

예를 들어 이렇게 메뉴가 있다고 치자.

여성의류 > 상의 > 아우터 > 코트

여성의류 > 상의 > 아우터 > 패딩

남성의류 > 상의 > 아우터 > 코트

 

1뎁스

    <Routes>
      <Route path="*" element={<Error404 />} />
      <Route
        path="/"
        element={
          <Navigate
            replace
            to="/women/top/outer/coat"
          />
        }
      />
      <Route
        path="/women/*"
        element={<Women />}
      />

      <Route path="/men/*" element={<Men />} />
    </Routes>

맨 상위에는 이렇게 여성의류, 남성의류에 대한 라우팅을 지정해주었고 뒤에 *을 붙였다.

그리고 뒤에 아무것도 안붙은 / url로 가려고 한다면 저절로 여성의류>상의>아우터>코트 페이지로 리다이렉트 시켰다.

 

2뎁스 

위에서 썼던 <Women />과  <Men /> 컴포넌트에 해당한다.

 <Routes>
      <Route path="top/*" element={<Top />} />
      <Route
        path="top/"
        element={
          <Navigate
            replace
            to="/women/top/outer/coat"
          />
        }
      />
    </Routes>

2뎁스는 상의 이므로 여기서는 top/*을 해주어 뒤에 하위 라우팅을 할 수 있도록 하였다.

또 여기서도 /women/top 에만 접근해도 바로 women/top/outer/coat로 이동할 수 있도록 리다이렉트를 시켰다.

 

 

3뎁스

  <Routes>
      <Route path="outer/*" element={<Outer />} />
   </Routes>

여기서도 리다이렉트를 시켜도 되고 안시켜도 되고. 위와 똑같이 하면 된다.

 

 

4뎁스

    <Routes>
      <Route path="coat" element={<Coat />} />
    </Routes>

드디어 마지막 페이지 단. 

Coat 컴포넌트가 화면에 보여질 컴포넌트이다.

 

 

 

v5에서는 아래와 같이 url을 가져오는 작업을 적어주었었는데 v6에는 필요없어 매우 간편하다.

const WareHousing = ({ match }) => {
  const requestedUrl = match.url.replace(/\/$/, '');
  return (
    <Suspense fallback={<PageLoader />}>
      <Switch>
        <Redirect exact from={`${requestedUrl}/`} to={`${requestedUrl}/purchase`} />

        <Route path={`${requestedUrl}/purchase`} component={lazy(() => import(`./Purchase`))} />
       ...
      </Switch>
    </Suspense>
  );
};