TIL-23.05.04

 

 

문제점

오늘 리액트 동적라우팅에 대해 공부하면서 path에 상대경로를 설정할 수 있다는 사실을 알았다.

상대경로란 현재 url을 기준으로 하위요소로 적용되는 경로라는 뜻이다

그동안은 라우터의 path를 절대경로로만 사용했었기에 모든 <Route/>에 full URL을 적어주었는데,

상대경로라는걸 알았으니 길고긴 URL주소를 줄이고 싶은 생각이 들어서 방법을 찾아보았다

 

 

 

 

시도한것

Nested Router

router.js 파일에서 <Route/>안에 children <Route/>를 넣어주고, 내부 children의 경로는 상대경로로 적으면 full URL주소를 적는 효과와 같다는 것을 알았다.

그리고 해당 컴포넌트에 접근해 <Outlet />을 렌더해주면 chilren 컴포넌트로 접근 가능한 라우팅이 렌더해줄수있다.

또 다른 방법은, router.js파일에서 경로 뒤에 /*을 붙여주어 해당 경로 뒤에 nested되는 경로(컴포넌트)들이 있다는것을 표시해주고

해당 컴포넌트에가서 <Routes><Route/></Routes> 을 렌더해주면 첫번째와 같은 효과를 볼수있다.

개인적인 생각으론 첫번째 방법이 더 좋다는 생각이다. router.js파일하나로 모든 <Route/>를 관리할수있기에 나는 앞으로 첫번째 방법으로 Nested Router를 사용할 예정이다

 

 

 

 

알게된점

라우터 경로엔 상대경로라는것이 존재하고, 중첩된 라우팅 형식도 존재한다