리액트 회고록 5. 중첩 라우팅

기본 라우팅 방법

react-router-dom이 V5에서 V6로 전환되면서 라우팅 방법이 달라졌다. <Switch>가 사라지고 <Routes>로 바뀌고 <Route>의 속성인 exact와 component가 사라졌다.

• 최상단 컴포넌트를 <BrowserRouter>로 감싼다.
• <Route>는 꼭 <Routes>안에 있어야 한다.
• <Link> 요소를 사용해서 라우팅 경로로 보내준다.

import React from "react";
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
// App 컴포넌트
function App() {
  return (
    <BrowserRouter>
      <Link to='/'>Home</Link>
      <Link to='/user'>User</Link>
      <Routes>
        <Route path="/" element={<Home/>}/>
        <Route path="/user" element={<User/>}/>
      </Routes>
    </BrowserRouter>
  );
}
// Home 컴포넌트
function Home() {
  return (
    <div>
      Home
    </div>
  );
}
// User 컴포넌트
function User() {
  return (
    <div>
      User
    </div>
  )
}

export default App;

중첩 라우팅 오류

User 컴포넌트에 url 주소를 명시적으로 라우팅을 걸게 되면 에러가 출력된다.

// User 컴포넌트 (중첩 라우팅 구현)
function User() {
  return (
    <div>
      <div>Users</div>
      <Link to={'/user/info'}>UserInfo</Link>
      <Link to={'/user/setting'}>UserSetting</Link>
      <Routes>
        <Route path="/user/info" element={<UserInfo/>}/>
        <Route path="/user/setting" element={<UserSetting/>}/>
      </Routes>
    </div>
  )
}
// UserInfo 컴포넌트
function UserInfo() {
  return (
    <div>UserInfo</div>
  );
}
// UserSetting 컴포넌트
function UserSetting() {
  return (
    <div>UserSetting</div>
  );
}

Home에서 User 링크를 누르게 되면 상위 경로에 "*"이 없습니다. 부모가 더 이상 일치하지 않으므로 랜더링 되지 않는다라고 경고문을 보여주며 해결 방안도 아래 제시해준다.

경고문을 무시하고 UserInfo 링크를 누르게 되면 경로가 일치하지 않는다고 경고문이 출력되며 랜더링이 되지 않는다.

중첩 라우팅 방법

경고문이 말한대로 <Route>뒤에 "*"을 붙혀준다.

function App() {
  return (
    <BrowserRouter>
      <Link to='/'>Home</Link>
      <Link to='/user'>User</Link>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/user/*" element={<User />} />
      </Routes>
    </BrowserRouter>
  );
}

경고문은 사라졌지만 UserInfo를 눌러도 텍스트가 나타나지 않는다. 부모경로 자체가 기본경로가 되기 때문이다.

URL을 바꿔서 확인해보면 이유를 알 수 있다.

User 컴포넌트의 <Route> 경로만 바꿔주면 해결된다.

function User() {
  return (
    <div>
      <div>Users</div>
      <Link to={'/user/info'}>UserInfo</Link>
      <Link to={'/user/setting'}>UserSetting</Link>
      <Routes>
        <Route path="/info" element={<UserInfo/>}/>
        <Route path="/setting" element={<UserSetting/>}/>
      </Routes>
    </div>
  )
}