URL 파라미터를 사용할 때는 라우트로 사용되는 컴포넌트에서 받아 오는 match라는 객체 안의 params 값을 참조합니다. match 객체 안에는 현재 컴포넌트가 어떤 경로 규칙에 의해 보이는지에 대한 정보가 들어 있습니다.

이제 App 컴포넌트에서 Profile 컴포넌트를 위한 라우트를 정의해 보세요. 이번에 사용할 path 규칙에는 /profiles/:username이라고 넣어 주면 됩니다. 이렇게 설정하면 match.params.username 값을 통해 현재 username 값을 조회할 수 있습니다.

라우트를 정의하고 나서 상단에 각 프로필 페이지로 이동하는 링크도 추가하세요.

App.js

import React from 'react';
import { Route, Link } from 'react-router-dom';
import About from './About';
import Home from './Home';
import Profile from './Profile';
 
const App = () => {
  return (
    <div>
      <ul>
        <li>
          <Link to="/">홈</Link>
        </li>
        <li>
          <Link to="/about">소개</Link>
        </li>
        <li>
          <Link to="/profile/velopert">velopert 프로필</Link>
        </li>
        <li>
          <Link to="/profile/gildong">gildong 프로필</Link>
        </li>
      </ul>
      <hr />
      <Route path="/" component={Home} exact={true} />
      <Route path={['/about', '/info']} component={About} />
      <Route path="/profile/:username" component={Profile} />
    </div>
  );
};
 
export default App;

---