# react router dom

dev_diver

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

dyorong

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

aimzero9303

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

jsanga214

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

dpfla73

movie app 2

ko-inseoklee

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

yrats

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

citron03

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

citron03

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

minsu2344

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

naraeseo

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

hjkwon0507

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

naraeseo

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

blackeichi

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

blackeichi

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

rkio

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

keynene

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

seongmini

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

wlwl99

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

yisu-kim

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