코드

// App.js
import React from 'react'
import { Route, Routes } from 'react-router-dom'
import About from './pages/About'
import Home from './pages/Home'
import Profile from './pages/Profile'

function App() {
  return (
    <Routes>
      <Route path='/' element={<Home />} />
      <Route path='/about' element={<About />} />
      {/* :를 이용해 url 설정 */}
      <Route path='/profiles/:username' element={<Profile />} />
    </Routes>
  )
}

export default App

// Home.js
import React from 'react'
import { Link } from 'react-router-dom'

function Home() {
  return (
    <div>
      <h1>홈</h1>
      <p>가장 먼저 보여지는 페이지</p>
      <ul>
        <li>
          <Link to='/about'>소개</Link>
        </li>
        <li>
          {/* 원하는 URL을 넣어준다 */}
          <Link to='/profiles/velopert'>velopert의 프로필</Link>
        </li>
        <li>
          {/* 원하는 URL을 넣어준다 */}
          <Link to='/profile/gildong'>gildong의 프로필</Link>
        </li>
        <li>
          {/* 원하는 URL을 넣어준다 */}
          <Link to='/profiles/void'>존재하지 않는 프로필</Link>
        </li>
      </ul>
    </div>
  )
}

export default Home

// Profile.js
import React from 'react';
import { useParams } from 'react-router-dom';

const data = {
  velopert: {
    name: '김민준',
    description: '리액트를 좋아하는 개발자',
  },
  gildong: {
    name: '홍길동',
    description: '고전 소설 홍길동전 주인공',
  },
};

function Profile() {
  // useParams를 이용해 url을 받아온다
  const params = useParams();
  // const {username} = useParams(); 처럼 비구조 할당 가능
  //  data객체에 params.username이 있는지 비교
  const profile = data[params.username];
  return (
    <div>
      <h1>사용자 프로필</h1>
      {profile ? (
        <div>
          <h2>{profile.name}</h2>
          <p>{profile.description}</p>
        </div>
      ) : (
        <p>존재하지 않는 프로필입니다.</p>
      )}
    </div>
  )
}

export default Profile

useParams

• URL의 동적인 부분을 가져옴
• 만약 App.js에서 '/profiles/:username/:age'로 변경하면 params = {username: '', age: ''}로 할당됨
• Home.js에서 동적 url 설정해줌
  • velopert와 gildong은 data에 있기 때문에 정상 작동
  • void는 data에 없기 때문에 undefined로 할당되어 '존재하지 않는 프로필입니다.'를 return