# react router dom

152개의 포스트

22. 11. 18 GDSC 프론트 스터디) 테스팅 에러 해결

라우팅 관련 테스트 코드를 작성하면서 두 가지 문제를 발견했다.첫 번째는 <Router> 컴포넌트를 사용할 때, history props가 없는 문제두 번째는 페이지 이동 테스트를 할 때 컴포넌트가 리렌더링이 되지 않아, element가 업데이트되지 않는 문제이다

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

shallow dive into react-router-dom v6 - createBrowserHistory

어떻게 하면 브라우저 뒤로가기 버튼 클릭 동작을 막을 수 있을까? 최근 과제를 수행하다가 내가 만든 버튼에서의 클릭 이벤트로는 발생할 수 있는 경우의 수를 생각해 에러들을 방지해 두었는데, 브라우저 자체의 뒤로가기, 앞으로가기 경우를 대비하지 않은 것을 발견했다. 게

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

gh-pages 배포 시, 빈 화면만 나오는 문제 해결하기..

react-router-dom을 사용한 리액트 프로젝트가 gh-pages 배포 후, 사진과 같이 텅 빈 화면만 나온다면?콘솔창을 보면 이런 에러가 있을 것이다.Error with Permissions-Policy header: Unrecognized feature: '

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

JS react-router-dom 버젼 변경 확인점

SwitchSwitch가 Routes로 대체Router내부에 element prop에 컴퍼넌트 할당

2022년 11월 1일
·
0개의 댓글
·

React - Movie App(2)

movie app 2

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

React testing library에서 테스트를 하다 발생할 수 있는 오류들(feat. Redux, Router 테스트 중 생긴 오류들)

이전 포스팅에서 Jest를 사용하여 Typescript로 구현한 로직을 테스트하는 방법 공부했다. 그러던 도중, React라는 Frontend 개발환경에서 컴포넌트가 정상적으로 동작하는지 테스트하는 것이 더욱 필요하지 않을까? 하는 생각에 찾아본 결과, React Te

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

병원 예약 시스템 구축

병원에 가려고 예약을 하려고 합니다.예약이 가능한 일자를 선택하여, 예약을 진행하려고 합니다. 노쇼 방지를 위한 설계를 합니다.styled-componentsreact-domreact-router-domprettiermodala tagmedia quarylocalSto

2022년 10월 19일
·
0개의 댓글
·

HashRouter에 대해서

HashRouter는 BrowserRouter가 있기 이전에 많이 사용되었다. HashRouter를 사용하면, 주소에 #이 붙게 되고 이로인해 SEO에 대응되지 않는다. 또한 HashRouter는 History location을 지원하지 않는다.

2022년 10월 19일
·
0개의 댓글
·

useHistory, useNavigate로 페이지 이동 후 값 전달 하기

페이지를 이동시키면서 state를 전달하는 방법에 대해서 알아보았다.

2022년 10월 15일
·
0개의 댓글
·

[리액트를 다루는 기술] Outlet과 Layout을 이용해 라우터 관리

Outlet은 Route의 children으로 들어가는 JSX 엘리먼트를 보여줌위 코드에서 Artielces 위에 Outlet 추가만약 Outlet Route의 children이 많으면 해당 path에 맞는 children만 출력Layout이 들어갈 페이지들을 Layo

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

Nested Routes (중첩 라우팅)

v6 이후 버전에서는 nested routes를 구현하는 방법이 달라졌는데 크게 두 가지로 나뉜다.부모 route의 path에서 주소의 마지막에 \*를 추가해 해당 route의 내부에 nested route가 render 될 수 있음을 명시적으로 표시가장 상단의 rou

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

[React] 리액트 라우터(Router v6) 세팅 및 사용 방법

react-router-dom 설치 👉🏽 참고 React Router 공식 문서

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

TypeScript 에서 라이브러리 사용 시 에러 잡기

드디어 TypeScript의 세계로 발을 들여놓았다. TypeScript의 편안함을 알기 전에 호환하는 라이브러리 에러 잡느라 바쁘다 바빠react router dom을 사용하려고 설치하니 위와 같은 문장이 나왔다. 강의에선 이렇게 명령어를 입력하면 된다고 들었으나..

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

React 검색어 추출하기(useLocation 정리 및 URLSearchParams사용)

검색창에 검색어를 입력한 후, 다른 페이지로 넘어가면서 검색어를 어떻게 받을 수 있을까?react-router-dom으로 라우터 세팅을 해놓았다면, useLocation을 이용하여 url의 정보를 추출할 수 있다. 👌우선 useLocation을 console.log해

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

React Router v6

평소처럼 react-router-dom을 사용하던 중, Switch, useHistory등이 작동하지 않는 것을 알게되었다.그래서 찾아보니 v5 -> v6로 업그레이드되면서 몇 가지 문법이 바뀌었다고 한다.😲바뀐 문법들을 블로그에 정리하면서 공부해보자✍공식 Qhick

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

[React] 라우터 path 가져오기(react-router-dom)

프로젝트를 만들던 중 게시판 목록을 보여주는 테이블을 제작을 했다. 매번 새로 만드는 것은 번거로운 일이므로, 컴포넌트 폴더에 넣어서 재사용 가능한 컴포넌트로 제작을 했다. 테이블에서 특정 게시물을 클릭하면 해당 게시물로 이동을 하게 될텐데, 재사용 가능하게 만들다보니

2022년 10월 1일
·
0개의 댓글
·

React_React-Router-Dom

기본적으로 리액트는 SPA 방식의 언어이므로 한페이지로만 구성되어있음그러나 React로 여러페이지를 구성하는 방법이 여러가지가 있는데 그 중 하나가 React-router-dom을 사용하는 것임Routes, Route, Link, useNavigate, Outlet 등

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

[TIL/React] 22.10.01 네비게이션 스타일

Link & NavLink React에서는 브라우저의 주소를 변경하기 위해 ` 태그 대신 컴포넌트를 사용한다. 이 때, ` 컴포넌트는 HTML5 History API를 사용하기 때문에 컴포넌트들을 새로 불러오는 것 없이 브라우저의 주소만 변경한다. content를

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

React Router

React SPA에서는 경로(Route)에 따라 다른 뷰를 보여줄 수 있다. 라우팅에 따라 다른 뷰를 보여주기 위해 React에서는 React Router라는 라이브러리를 사용한다. SPA & Routing SPA는 하나의 페이지를 가지고 있지만 사실 한 종류의 화면

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

antd-mobile Button 메모리 누수 막기

antd-mobile Button 컴포넌트에서 메모리가 누수되는 현상의 원인을 찾고 비동기 함수를 올바르게 사용해보자.

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