다음으로는 App 컴포넌트에서 Route 컴포넌트를 사용하여 각 라우트의 경로를 지정해 주세요.

App.js

import React from 'react';
import { Route } from 'react-router-dom';
import PostListPage from './pages/PostListPage';
import LoginPage from './pages/LoginPage';
import RegisterPage from './pages/RegisterPage';
import WritePage from './pages/WritePage';
import PostPage from './pages/PostPage';

const App = () => {
  return (
    <>
      <Route component={PostListPage} path={['/@:username', '/']} exact />
      <Route component={LoginPage} path="/login" />
      <Route component={RegisterPage} path="/register" />
      <Route component={WritePage} path="/write" />
      <Route component={PostPage} path="/@:username/:postId" />
    </>
  );
};
export default App;

---

 

위 라우트 중 PostListPage를 보면 path에 배열을 넣어 주었지요? 이렇게 배열을 넣어 주면 한 라우트 컴포넌트에 여러 개의 경로를 쉽게 설정할 수 있습니다.