React/기초
[react] router Link 사용법
고기고기물고기
2023. 1. 13. 20:15
https://daeseok94.tistory.com/45
[react] react-router-dom v6 으로 navigate 만들어보기
1. 해당 프로젝트에 react-router-dom 사용 환경 준비 yarn을 통해 설치 yarn add react-router-dom npm을 통해 설치 npm install react-router-dom BrowserRouter : React 웹 애플리케이션 개발 시 클라이언트 사이드 라우팅을
daeseok94.tistory.com
router 사용 예제는 위를 참고해주세요!!
Link 사용시 URL에 파라미터 표시
App.js
<Route path="/study_main" element={<StudyMain />}>
<Route index element={<StudyList />} />
<Route path=":studyId" element={<Study />} />
</Route>
예 ) URL localhost.com/study_main/3
Link 삽입하는 곳
<Link to={`/study_main/${study.id}`} />
Link 로 넘어간 페이지 파라미터 가져오기
const {page, id} = useParams();
예 ) URL localhost:3000/study_main/3 <-- 해당 URL 이나 새로고침 ERR_aborted 404 에러시
webpack 설정
webpack.config.js
new HtmlWebPackPlugin ({
...,
publicPath: '/'
}),