리액트20 리액트 라우터(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. 리액트 라우터(React Router) 사용법(4) 1. 라우터에서 쿼리스트링을 사용하는 방법 우선 쿼리스트링을 화면에 표출해 봅니다. import { useLocation } from 'react-router-dom'; const About = () => { const location = useLocation(); return ( 소개 리액트 라우터를 사용해 보는 프로젝트입니다. 쿼리스트링: {location.search} ); }; export default About; useLocation 이라는 Hook을 사용합니다. 이 훅은 location이라는 객체를 반환하는데 사용자가 보고 있는 페이지 정보를 가지고 있습니다. pathname : 현재 주소의 경로 (쿼리스트링 제외) search : 맨 앞의 ? 문자를 포함한 쿼리스트링 값 hash : 주소의.. 2023. 5. 29. 이전 1 2 3 4 다음 반응형
