# react router dom
[React] useLocation 사용시 state 값이 null로 들어오는 문제
계속 react-router-dom v5를 쓰다가 v6에 익숙해지기 위해 v6에서 변화 된 부분을 적응중이다.평소 쓰던것처럼 state에 오브젝트를 주어 값을 전달하려 했고 useLocation을 사용 콘솔창에서 확인해보았다. pathname이나 다른 값들은 잘 전달이
5/11 TIL
이번 스터디 주제는 react router 이다.프로젝트를 설계하던 중 탭 이동에 따른 다른 화면이 보여줘야 하는 부분이있어서, 리액트 라우터에 대해서 공부를 해봤다. 리액트에서는 페이지 이동 역할을 하는 a태그를 쓰지 않는다.대신 react router를 사용한다.r
react-router-dom (1)
react-router react-router-dom v6 기준으로 router 사용법이 작성되었습니다. react-router-dom v5 전과 다른점이 있으니 참조하세요 설치 방법
[React+Typescript] Layout Component(with. react-router-dom v6)
자세한 설명보다는 구현 방법의 주심을 두었습니다. 이번 포스트는 Layout Component입니다. 이번 Layout Component 또한 지난 번 Private Route와 거의 같은 원리로 작동한다고 생각이 되며, Router를 사용하는 방법의 응용?! 이라고
[React+Typescript] 권한 체크 Route(react-router-dom v6)
이번 포스트는 저번 Private Router에 이어 비슷한 원리로 작동하는 권한을 체크해주는 Router에 대해서 포스팅할 계획입니다.내게 해당 Router가 필요 했던 이유Login한 사용자의 권한에 따라 접근 가능 여부를 체크하기 위해서앞서 말한것과 같이 Priv
[에러/해결] export 'withRouter' (imported as 'withRouter') was not found in 'react-router-dom'
문제가 된 코드에러 로그마찬가지로 리액트를 다루는 기술 개정판을 학습하던 중 오류를 만나게 되었습니다. 로그인/회원가입 과정에서 로그인/회원가입 버튼을 누르면 홈으로 이동하도록 하는 상황이었는데, 그 과정에서 아래와 같은 오류를 내뱉습니다.withRouter를 reac
Insta-ReactJS. setUp
\-apollo graphql prism등으로 만든 insta-backend server와 연동할 web-frontend를reactJS로 만듬.공식문서https://www.apollographql.com/docs/react/get-startedhttps
[React+Typescript] Private Router(react-router-dom v6)
내게 Private Router가 필요했던 이유반드시 인증(로그인)을 해야만 접근 가능한 페이지(마이 페이지 등)반드시 인증(로그인)을 하지 않아야만 접근 가능한 페이지(로그인, 회원가입 페이지 등)위와 같이 페이지의 구분이 생겨 인증(로그인) 여부에 대해 체크를 해주
[리액트] Router 에러 Uncaught Error: [div] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>
Routes 안에는 Route 혹은 <></>만 넣자.
useNavigate
문해력 향상을 위한 서비스, 문해한 하루를 프로젝트로 진행하며 training component를 구현할 때, 꼭 해야하는 것은 유저가 훈련을 하고 있다는 느낌을 받도록 구현하는 것이었다.main page에 접속하게 되면 상단에 training 탭이 존재하는데 여기서
<Redirect>가 안될 때 history.push({state:})를 사용해보자 - 로그인 후 원래페이지로 이동하기
내가 기록한 코드는 다른 내용도 조금 엮여있는데,로그인 후 페이지 리다이렉트 시키실 분은 빨간 글씨만 봐주시면 될것 같다. 사실 react-router-dom 의 <Redirect> 를 사용하려 했으나, 왜인지 작동하지 않아서 react-router-dom
react-router-dom Promt 사용하기
공식홈페이지양식이 절반 쯤 채워진 상황에서 사용자가 다른 페이지로 넘어가려고 하는 상황에 "저장되지 않을 수 있습니다. 페이지를 정말 이동하시겠습니까?" 등의 메세지를 표시하고 싶을 때 사용한다. when의 조건이 true일 때 message가 노출이 된다. 브라우저의
React-Router) nested routing
일단 nested routing을 보기 전, 알아야할 컴포넌트가 있다.바로Outlet 컴포넌트는 뭐냐? Jaeme.dev 님의 블로그 참조했습니다.app.js를 잘 보면, 루트 태그로 감싸져있는 또다른 루트 태그가 있다. 리액트 라우터 최신버전에서 지원하는 nested
[React] React-router-dom
리액트는 SPA(Single Page Application) 방식으로써, 여러개의 페이지를 사용하며, 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 말합니다.리액트를 사용하지 않는다면 새로운 페이지를 로드할 때마다 새로운 페이지를 로드하는 방식의 MPA(Mult
220325 TIL
Instead of useHistory() function or history props contained in <Route /> component in v5, we use useNavigate() function to move page inside an even
