현재 선택된 category 값을 URL 파라미터를 통해 사용할 것이므로 Categories 컴포넌트에서 현재 선택된 카테고리 값을 알려 줄 필요도 없고, onSelect 함수를 따로 전달해 줄 필요도 없습니다.

다 만들었으면 App의 기존 내용을 모두 지우고 Route를 정의해 주세요.

App.js

import React from 'react';
import { Route } from 'react-router-dom';
import NewsPage from './pages/NewsPage';
 
const App = () => {
  return <Route path="/:category?" component={NewsPage} />;
};
 
export default App;

---

 

위 코드에서 사용된 path에 /:category?와 같은 형태로 맨 뒤에 물음표 문자가 들어가 있는데요. 이는 category 값이 선택적(optional)이라는 의미입니다. 즉, 있을 수도 있고 없을 수도 있다는 뜻이죠. category URL 파라미터가 없다면 전체 카테고리를 선택한 것으로 간주합니다.