14.3 뉴스 만들기(라우터)

라우터 설치하기

$ yarn install react-router-dom@5 버전 조심!!

라우터 적용하기

index.js

import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

pages/NewsPage.js

import Categories from "../components/Categories";
import NewsList from "../components/NewsList";

const NewsPage = ({match})=>{
  const category = match.params.category || 'all'
  return (
    <>
      <Categories/>
      <NewsList category={category}/>
    </>
  )
}
export default NewsPage

const category = match.params.category || 'all'

• 카테고리가 선택되지 않았으면 기본값 'all'로 사용하겠다.

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

App.js

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

export default App;

path="/:category?" 맨 뒤에 ? 문자가 들어가 있는데, 이는 카테고리 값이 선택적이라는 의미이다.

Categories.js에서 NavLink 사용하기

import { NavLink } from "react-router-dom";

const Category = styled.div`..`를
const Category = styled(NavLink)`..` 이렇게 바꿔준다

&.active{
    font-weight:600;
    border-bottom:2px solid #22b8cf;
    color:#22b8cf;
    &:hover{
      color:#3bc9db;
    }
  }
<CategoriesBlock>
      {categories.map(c=>(
        <Category 
        key={c.name}
        activeClassName="active"
        exact ={c.name==='all'}
        to =  {c.name === 'all' ? '/' : `/${c.name}`}
        onClick={()=>onSelect(c.name)}
        >
          {c.text}</Category>
      ))}
</CategoriesBlock>

to = {c.name === 'all' ? '/' : /${c.name}}

to 값 : "/카테고리이름" , to 값이 "/"를 가리키고 있을 떄는 exact 값을 true로 해줘야한다.

이 값을 설정하지 않으면 다른 카테고리가 선택되었을 때도 전체보기 링크에 active 스타일 적용되는 오류가 발생한다.