[프론트엔드] react router v6 서브라우팅

이전 글

• ​2022.03.16 - [프론트엔드/React] - [프론트엔드] react router v6 Query 읽는법 (location)
• ​2022.03.16 - [프론트엔드/React] - [프론트엔드] React Router v6 match.parms 사용방법
• 2022.03.14 - [프론트엔드/React] - [프론트엔드] REACT ROUTER-TUTORIAL 오류 수정

 

 

1. 서브라우팅 구조

 

- App.js

 

App.js에서는 <Profiles /> 컴포넌트를 렌더링하고, Profiles 주소로 들어오면 render안에 작성한 <div> 태그를 렌더링, 그리고 <Profiles /> 컴포넌트를 렌더링.

 

 

import React from 'react';
import {Link, Route, Routes} from 'react-router-dom';
import About from './About';
import Home from './Home';
import Profiles from './Profiles';

const App = () => {
  return (
    <div>
      <ul>
        <li>
          <Link to="/">홈</Link>
        </li>
        <li>
          <Link to="/about">소개</Link>
        </li>
        <li>
          <Link to="/profiles">프로필</Link>
        </li>
      </ul>
      <hr/>
    <Routes>
      <Route path="/" element={<Home />}  exact={true}/>
      <Route path="/about" element={<About />} />
      <Route path="/info" element={<About />} />
      {/* 서브라우팅 */}
      <Route path="/profiles/*" element={<Profiles />} />
    </Routes>
    </div>
  );
};

export default App;

 

- Profiles.js

import React from "react";
import {Link, Route, Routes } from 'react-router-dom'
import Profile from "./Profile";

const Profiles = () => {
    return (
        <div>
            <h3>사용자 목록</h3>
            <ul>
                <li>
                    <Link to="/profiles/ycLee">ycLee</Link>
                </li>
                <li>
                    <Link to="/profiles/gildong">gildong</Link>
                </li>
            </ul>
            <Routes>
                <Route path="/*" element={<div>유저를 선택해주세요.</div>} />
                <Route path=":username" element={<Profile />} />
            </Routes>
        </div>
    )
}

export default Profiles;

 

• ender는 element로 바뀌었고. 화살표 함수를 사용할 필요가 없어졌다
• 하위 페이지가 있다면 부모 Route에 '/*' 을 추가해줘야한다 (exact가 대체된 것)
• path에 부모 경로까지 적을 필요 없이 파라미터만 적어준다 (:username)
• 무조건!! <Routes>로 싹 다 감싸줘야한다

 

 

2.  서브라우팅 구현 화면