# react router dom

100개의 포스트
post-thumbnail

[React] useLocation 사용시 state 값이 null로 들어오는 문제

계속 react-router-dom v5를 쓰다가 v6에 익숙해지기 위해 v6에서 변화 된 부분을 적응중이다.평소 쓰던것처럼 state에 오브젝트를 주어 값을 전달하려 했고 useLocation을 사용 콘솔창에서 확인해보았다. pathname이나 다른 값들은 잘 전달이

4일 전
·
0개의 댓글
post-thumbnail

[React] react-router-dom 으로 Pagination 기능 만들기

react-router-dom 프로젝트 나만의 기능 추가하기

5일 전
·
0개의 댓글
post-thumbnail

[React] react-router-dom v6 간단 정리

react-router-dom 버전6에 대해 정리한 글입니다.

5일 전
·
0개의 댓글
post-thumbnail

5/11 TIL

이번 스터디 주제는 react router 이다.프로젝트를 설계하던 중 탭 이동에 따른 다른 화면이 보여줘야 하는 부분이있어서, 리액트 라우터에 대해서 공부를 해봤다. 리액트에서는 페이지 이동 역할을 하는 a태그를 쓰지 않는다.대신 react router를 사용한다.r

6일 전
·
0개의 댓글

react-router-dom (1)

react-router react-router-dom v6 기준으로 router 사용법이 작성되었습니다. react-router-dom v5 전과 다른점이 있으니 참조하세요 설치 방법

2022년 5월 9일
·
0개의 댓글

[React+Typescript] Layout Component(with. react-router-dom v6)

자세한 설명보다는 구현 방법의 주심을 두었습니다. 이번 포스트는 Layout Component입니다. 이번 Layout Component 또한 지난 번 Private Route와 거의 같은 원리로 작동한다고 생각이 되며, Router를 사용하는 방법의 응용?! 이라고

2022년 5월 7일
·
0개의 댓글

[React+Typescript] 권한 체크 Route(react-router-dom v6)

이번 포스트는 저번 Private Router에 이어 비슷한 원리로 작동하는 권한을 체크해주는 Router에 대해서 포스팅할 계획입니다.내게 해당 Router가 필요 했던 이유Login한 사용자의 권한에 따라 접근 가능 여부를 체크하기 위해서앞서 말한것과 같이 Priv

2022년 5월 5일
·
0개의 댓글
post-thumbnail

[에러/해결] export 'withRouter' (imported as 'withRouter') was not found in 'react-router-dom'

문제가 된 코드에러 로그마찬가지로 리액트를 다루는 기술 개정판을 학습하던 중 오류를 만나게 되었습니다. 로그인/회원가입 과정에서 로그인/회원가입 버튼을 누르면 홈으로 이동하도록 하는 상황이었는데, 그 과정에서 아래와 같은 오류를 내뱉습니다.withRouter를 reac

2022년 5월 3일
·
0개의 댓글

Insta-ReactJS. setUp

\-apollo graphql prism등으로 만든 insta-backend server와 연동할 web-frontend를reactJS로 만듬.공식문서https://www.apollographql.com/docs/react/get-startedhttps&#x3

2022년 4월 30일
·
0개의 댓글

[React+Typescript] Private Router(react-router-dom v6)

내게 Private Router가 필요했던 이유반드시 인증(로그인)을 해야만 접근 가능한 페이지(마이 페이지 등)반드시 인증(로그인)을 하지 않아야만 접근 가능한 페이지(로그인, 회원가입 페이지 등)위와 같이 페이지의 구분이 생겨 인증(로그인) 여부에 대해 체크를 해주

2022년 4월 30일
·
0개의 댓글
post-thumbnail

Router 접근 제한 구현

react-router-dom v6를 사용한 페이지 접근 제한

2022년 4월 28일
·
0개의 댓글

useNavigate

문해력 향상을 위한 서비스, 문해한 하루를 프로젝트로 진행하며 training component를 구현할 때, 꼭 해야하는 것은 유저가 훈련을 하고 있다는 느낌을 받도록 구현하는 것이었다.main page에 접속하게 되면 상단에 training 탭이 존재하는데 여기서

2022년 4월 27일
·
0개의 댓글
post-thumbnail

<Redirect>가 안될 때 history.push({state:})를 사용해보자 - 로그인 후 원래페이지로 이동하기

내가 기록한 코드는 다른 내용도 조금 엮여있는데,로그인 후 페이지 리다이렉트 시키실 분은 빨간 글씨만 봐주시면 될것 같다. 사실 react-router-dom 의 &lt;Redirect> 를 사용하려 했으나, 왜인지 작동하지 않아서 react-router-dom

2022년 4월 22일
·
0개의 댓글
post-thumbnail

react-router-dom Promt 사용하기

공식홈페이지양식이 절반 쯤 채워진 상황에서 사용자가 다른 페이지로 넘어가려고 하는 상황에 "저장되지 않을 수 있습니다. 페이지를 정말 이동하시겠습니까?" 등의 메세지를 표시하고 싶을 때 사용한다. when의 조건이 true일 때 message가 노출이 된다. 브라우저의

2022년 4월 12일
·
0개의 댓글
post-thumbnail

React-Router) nested routing

일단 nested routing을 보기 전, 알아야할 컴포넌트가 있다.바로Outlet 컴포넌트는 뭐냐? Jaeme.dev 님의 블로그 참조했습니다.app.js를 잘 보면, 루트 태그로 감싸져있는 또다른 루트 태그가 있다. 리액트 라우터 최신버전에서 지원하는 nested

2022년 3월 30일
·
0개의 댓글
post-thumbnail

[React] React-router-dom

리액트는 SPA(Single Page Application) 방식으로써, 여러개의 페이지를 사용하며, 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 말합니다.리액트를 사용하지 않는다면 새로운 페이지를 로드할 때마다 새로운 페이지를 로드하는 방식의 MPA(Mult

2022년 3월 26일
·
0개의 댓글

220325 TIL

Instead of useHistory() function or history props contained in &lt;Route /> component in v5, we use useNavigate() function to move page inside an even

2022년 3월 25일
·
0개의 댓글

[TIL] d+14

React-Router-Dom 에러

2022년 3월 20일
·
0개의 댓글