04. Routes 정의

react-router는 NextJS(프레임워크) 없이 기본적인 React 애플리케이션에서 라우팅하는 방법이다.

react-router의 작동방식은 url을 지정하고 Home이라는 컴포넌트 render를 요청하는 것이다.

 

 

app 폴더 내 부분을 root segment라고 부르는데 사용자가 먼저 root("/")에서 보게 될 페이지이다.

 

 

app 폴더 내 about-us를 생성하여 NextJS(프레임워크)에게 잠재적으로 하나의 페이지가 될 수 있다고 알려주는 것이다.

 

 

 

브라우저에서 http://localhost:3000/about-us 

해당 경로로 이동하게 되면 404 오류가 나타나고 있는걸 확인할 수 있다. 

그 이유는 about-us로 이동 했을때 NextJS가 랜더링할 UI를 제공하지 않았기 때문이다.

 

 

 

page라는 명칭 대신에 다른 명칭일 경우 404에러가 발생한다.

react-router-dom처럼 수동적으로 알려줄 필요 없이 NextJS는 app폴더가 루트("/")가 되는 것이고 해당 하위 폴더인 about-us를 통해 경로가 결정된다. NextJS는 프레임워크이기 때문에 해당 규칙에 따라서 router가 결정되는 것이다.

 

 

 

app > about-us>company > sales 

app 폴더 기준으로 sales까지 하위 폴더를 생성하고 코드를 작성하면

http://localhost:3000/about-us/company/sales 해당 경로가 결정된다.