navlink2 리액트로 뉴스뷰어 만들어 보기(4) 리액트 라우터로 뉴스 카테고리 페이지 만들어 봅니다. 라우터를 사용하기 위해 리액트-라우터를 설치합니다. >npm i react-router-dom 리액트 라우터를 적용할 때 만들어야 할 페이지는 단 하나입니다. src 디렉터리에 pages라는 디렉터리를 생성하고, 그 안에 NewsPage.js 파일을 다음과 같이 만듭니다. import { useParams } from 'react-router-dom'; import Categories from '../components/Categories'; import NewsList from '../components/NewsList'; const NewsPage = () => { const params = useParams(); // 카테고리가 선택되지 않았으면.. 2023. 6. 6. 리액트 라우터(React Router) 부가기능 활용 이전 블로그의 리액트 라우터 사용법 예제를 이어서 부가기능에 대해 설명하고자 합니다. 1. useNavigate Link 컴포넌트를 사용하지 않고 다른 페이지로 이동해야 하는 상황에서 사용하는 Hook 입니다. Layout 컴포넌트를 아래와 같이 수정합니다. import { Outlet, useNavigate } from 'react-router-dom'; const Layout = () => { const navigate = useNavigate(); const goBack = () => { // 이전 페이지로 이동 navigate(-1); }; const goArticles = () => { // articles 경로로 이동 navigate('/articles'); }; return ( 뒤로가기 게시.. 2023. 5. 29. 이전 1 다음 반응형
