# react router dom
[react-router-dom] localhost에서 404 발생시
localhost에서 Route로 path를 정확하게 이동했는데도 404가 발생하였다.stack-overflow를 찾아보니, historyApiFallback을 webpack.config.js에 추가하라고 한다. 추가를 해주니, path에 component가 정상적으로
[React]history push/replace
🌀 조금 복잡한 라우팅 지금까지는 react-router-dom을 사용하면서 그저 페이지를 지정해주고 그 페이지로 이동하는 작업만을 했었는데, history에 어떤 데이터를 쌓거나, 덮어씌우는 작업도 할 수 있는걸 알게 되었다. 그 중에서 history의 메서드인 p
[React] history.push()로 props 넘겨주기
#react #react-router-dom # useHistory # useLocation
<React> React-Router-Dom 사용
하지만 앞으로 우리가 만들 웹페이지는 하나의 창으로 구성할 것이 아니다.다른 많은 웹페이지가 그렇듯 사용자의 클릭에 따라 다른 창을 제공하는 것이 이상적일 것이다.이를 위해 react-router-dom을 이용할 것이다.전체적인 구조는기존의 영화 목록을 담고 있던 Ap
7월 9일 금요일 TIL
React-router 주요 컴포넌트 import Router `` > Route Machers `` `` Route Changers ``
[react] 노마드코더 영화웹서비스 제작 6.0 라우터를 위한 준비
react-router dom 설치네비게이션으로는 react-router dom이라는 것을 쓴다.네비게이션을 만들어주는 패키지이다.npm install react-router-dom을 입력해 설치한다.설치되는 동안, 더 많은 화면을 보고 더 많은 것들을 할 수 있도록
React-Router-Dom
라우팅이란? 네트워크상에서 주소를 이용, 목적지까지 경로를 체계적으로 결정하는 경로선택 과정리액트 라우터는 리액트의 화면 전환을 도와주는 역할을 한다. 일반적인 웹에서 a태그를 이용해 다른 페이지로 이동했었다. 리액트에서는 React-Router 를 통해 Link 태그
[React] Failed to compile. Module not found: Can't resolve 'react-router-dom'
yarn, npm
TIL : React-Router-Dom
리액트 Sprint를 진행하면서 갑자기 React-router-dom이라는 것이 나왔었다.그때는 관심있게 보지않았는데 .. React로 페이지를 만들어보고 싶어서 복습하던 도중 여러페이지로 쉽게 나눠주는 것이 React-router-dom이라고 해서 다시 복습하게되었다
React-Router.2 Hooks
react-router-dom 5.1v 부터 3가지의 hooks을 제공합니다.설치는 이전과 동일합니다.터미널에 react-router-dom 설치 1\. yarn add react-router-dom2\. npm install react-router-domuseHist
React-Router-Dom
사용자가 주소로 접속했을 때 주소를 알아내서 그것에 해당하는 component를 render하고 state를 관리하기 위해 state, props를 복잡하게 사용해야 한다. 하지만 아주 힘든 작업이지만 이 작업들을 쉽게 만들어 주는 것이 react-router-dom이
리액트 라우터 적용해보는 레시피
라우터를 설치한다. npm install react-router-domBrowserRouter로 App.js의 컴포넌트 전체를 감싼다.url에 따라 각각 다른 페이지로 보여주고 싶은 컴포넌트들을 Switch로 감싼다.Switch 외부에 있는 컴포넌트는 모든 페이지에 공
Route & Link (리액트 여섯번째 이야기) (TIL 30일차)
"드디어 해결했습니다 ㅠㅠ" 이번 글에서는 React-Router-Dom 이 제공하는 Route 와 Link 컴포넌트를 이용해 props 를 전달하는 방법을 다뤄보려고 합니다. 개인적으로 이 문제를 해결하기 위해 여러 자료를 참고하고 오래 고민했었는데요. 코드스테이츠
SPA(Single Page Application)
SPA가 무엇이며, 왜 사용하는지 그리고 react-router-dom을 사용한 간단한 예시가 있는 글입니다.
React Router
typescript에서 react-router-dom을 사용하려면 별도의 package를 설치해야 함npm i @types/react-router-domRouter사용 예시Switch: 한 번에 하나의 Route만 Render하게 해줌