$ yarn install react-router-dom@5
버전 조심!!
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
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'
현재 선택된 카테고리 값을 URL 파라미터를 통해 사용할 것이므로 Categories 컴포넌트에서 현재 선택된 카테고리 값을 알려 줄 필요도 없고, onSelect 함수를 따로 전달할 필요도 없다.
import {Route} from 'react-router-dom'
import NewsPage from './pages/NewsPage'
const App = () => {
return <Route path="/:category?" component={NewsPage} />
}
export default App;
path="/:category?"
맨 뒤에 ? 문자가 들어가 있는데, 이는 카테고리 값이 선택적이라는 의미이다.
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 스타일 적용되는 오류가 발생한다.