React :: (Next.js 사용 없이) 해당 폴더의 파일을 동적 라우팅.

 

매번 생성되는 파일을 App.js에 수작업으로 라우팅하기에는 쉬운 일이 아니다.

 

그래서.. 페이지로 라우팅되어야하는 파일을 임시의 ./pages 라는 폴더에 몰아 넣고

해당 폴더에 있는 파일을 전부 하겠다는 문법을 작성해보았다.

아마 동적 라우팅을 검색하면 같은 템플릿에 props 만 바뀌는 (상품 상세 이미지 ..) 형태가 다수 나와 원하는 정보를 얻기 힘들것이다.

 

Next.js 를 사용하여 개발하게 되면 우리가 구현하고자 하는 기능을 더 손쉽게 구현할 수 있으나

순수 React (React-create-APP) 기반으로 App.js 를 동적으로 라우팅 하려면 아래와 같은 문법 조작이 필요하다.

 

Code.

 

 

23.11 기준으로 위의 코드를 현재 프로젝트에 이식하려고 하면 에러 메세지가 발생할 것이다.

 

Error.

위의 문법이 react-router-dom v5 기반으로 구현되어서 발생하는 오류가 대부분.

v5 와 v6 의 문법이 꽤 차이가 나고, 없어진 문법도 있는 듯하여 나는 컨버팅을 포기하고 다운그레이드를 선택함.

현재 프로젝트의 경우 react-router-dom 을 라우팅하는 곳에서만 사용하고 있기 때문에..

혹시.

버전을 다운그레이드 할 수 없는 프로젝트라면ㅡ, 해당 문법을 참고하여 컨버팅을 해보길 추천한다.

 

react-router-dom 다운그레이드 방법.

> npm i react-router-dom@5.2.0

 

만약.. .ts 와 관련된 오류가 발생한다면, ts 관련 react-router-dom 을 별도로 설치해주도록 하자.

> npm install react-router-dom @types/react-router-dom

 

위와 같이 다운그레이드를 하면 정상 작동이 될 것이다.