react route css

Question

react routes 경로중 특정 경로에만 적용하고 싶은 css가 있는 경우 어떻게 해야 하나요??
현재는 index.css에 모든 routes경로의 스타일이 적용되어 있는 상태입니다.
특정 경로를 감싸난 css provider가 있을까요??

이국범 · Answer

특정 URL에 진입하면 className을 수정해줍니다. 즉 className을 가변적으로 만들면 해결될 문제 같습니다

백시현 · Answer

저 같은 경우에는 useLocation을 사용해서 pathname을 가져왔습니다.boolean타입 state를 추가하고 원하는 pathname이 true인지 false인지 여부에 따라 state를 변경하는 함수를 추가했습니다 . 이 함수가 useEffect으로 처음과 pathname이 바뀔때마다 실행되게 했습니다. 해당 state가 true인지 false인지에 따라 클래스를 추가하셔도 되고 스타일컴포넌트 사용중이시면 props로 넘겨서 사용하셔도 될거같아요

Gorilla.Kim · Answer

안녕하세요 : )
React를 이용해서 웹 개발을 할때 특정경로에 있는 컴포넌트들만 특정 css를 적용하는 방법에 대한 질문으로 이해했습니다.

이에 대한 방안으로 제안드릴수 있는 방법은 총 2가지가 있습니다.

1. ClassName을 이용해서 적용하는 방법
* 특정 클래스 명을 가지는 엘리먼트만 원하는 디자인을 갖도록 가장 최상위 css(혹은 sass) 파일을 수정하는 방법입니다.

2. 중첩 라우팅을 이용해 동일한 레이아웃을 적용하는 방법
* 보다 정확한 사용법은 구글에 검색하시면 많이 나올것입니다 ㅎㅎ
* 중첩라우팅 방법과 react-router-dom 을 응용한다면 특정 경로 아래의 경로에 접근하는 페이지에 대하여 동일한 UI 혹은 UI스타일을 갖도록 할 수 있습니다.