Subscribe
Javascript
react-router v6.4 이상에서 data API 가 동작하지 않는다면
https://reactrouter.com/en/main/routers/picking-a-router 문서의 설명에 따라, createBrowserRouter 를 적용했으나, loader 나 errorElement 가 동작하지 않는다. migration guide랑 유사한 방식으로 잘 구현한 것 같은데.... 왜그런지 확인해보니, createBrowserRouter 는 적용했으나 아래와 같은 형식의 기존의 라우트 코드 내부에서는 data API가 동작하지 않는 것 같았다. (Typescript 자동완성이 되길래, 당연히 잘 될줄 알았지만..) 테스트 해보니, 제일 바깥쪽이 data router로 만들어졌더라도 <Routes>하위에 사용한 loader 등의 data API는 동작하지 않는다. 아래처럼 <Routes> 바깥쪽 라우트의 data API는 동작은 하지만, LegacyComponentWithRoutes 내부의 ( <Routes> 하위) 컴포넌트에서 발생한 exception은 무시된다. 반면, loader에서 발생한 exception으로는 잘 동작한다.
react-router v6 에서 일치하는 경로를 찾는 방법
v5에서 쓰던 <Switch> 컴포넌트를 <Routes> 로 변경했다. 어떤 방법으로 적당한 경로를 찾아오는지 궁금해서 찾아보았다. https://velog.io/@peacesong/react-router-v6 요약하면, v5 이전( <Switch> )에서는 위에서부터 아래로 탐색하며 일치하는 라우트를 확인하고 v6 ( <Routes> )부터는 전체 목록 중 가장 적당한 라우트를 찾아준다고 한다. 그럼 매치되는 라우트가 많으면? 궁금해서 확인해보니 아래와같이 동작한다 일치하는 라우트가 둘 이상인 경우: 위쪽 컴포넌트를 반환 exact match 우선 반환
null-prototype object
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object#null-prototype_objects js object인데, 기본으로 상속받는 prototype이 없는 객체를 만들 수 있다고 한다. https://getaround.tech/exif-data-manipulation-javascript/ 이 글을 읽다가 발견했는데, const result = groupBy() 결과에서 result[toString] 같은게 존재하면 곤란하니까.... 그렇구만.