리액트 라우터 조금더 똑똑하게 쓰자

일단 우리가 라우터를 사용을 할때 이런 형식으로 사용을 한다.

<Routes>
	<Route path = "/" element={<MainPage/>}/>
    <Route path = "contents" element={<contents/>}
    <Route path = "/login" element{<Login/>} />
</Routes>

근데 우리가 로그인 페이지에서는 헤더 부분을 안보여 주고 싶고 메인 페이지에서는 헤더 부분을 보여 주고 싶을때는 어떻게 해야할까?

일단 우리는 헤더 컴포넌트를 만들고 시작을 해보자

현재 우리가 App.jsx라는 파일 안에서 만들고 있다고 하자

function Header() {
	return (
    	<div>
        	<div>
            	<Link to="/">홈</Link>
                <Link to="/contents">컨텐츠</Link>
            </div>
            <div>
            	<Link to="/login">로그인</Link>
			</div>
    	<div/>
    )
}

컴포넌트를 만들때는 무조건 대문자로 시작해야 한다.

일단 대충 헤더 컴포넌트를 만들었다.
그럼 우리는 이것을 사용해볼 것이다.

헤더를 표시를 해줄려면 이렇게 해주면 된다.

function App() {
	return(
    	<div>
        	<Header />
        	<Routes>
				<Route path = "/" element={<MainPage/>}/>
    			<Route path = "/contents" element={<contents/>}
    			<Route path = "/login" element={<Login/>} />
			</Routes>
        </div>
    )
}

근데 이렇게하면 우리는 로그인 페이지에 접속을 해도 똑같이 헤더가 표시가 되는 것을 볼 수 있다.
이런것도 분리를 해주고 싶으면 우리는 이런 방법을 쓰면 된다.

Route 안에 있는 element에는 여러 컴포넌트를 넣을 수 있다.
또한 라우터도 여러 주소로 사용을 할 수 있는데 예시를 보여주겠다.

<Routes>
    <Route path = "/" element={<MainPage/>}
    <Route path = "/contents" element={<contents/>}>
		<Route path = "components" element={<components/>}
    </Route>
    <Route path = "/login" element{<Login/>} />
</Routes>

이런 방식으로 쓰면 주소를 /contents로 이동을 했을때는 contents의 내용을 보여주고 /contents/components로 이동을 하면 components의 내용을 보여준다.

그리고 헤더 부분을 나눠서 사용을 하고 싶을때

<Route 
path ="/" 
element={
	<div>
    	<Header />
        <MainPage />
    </div>
} />
<Route 
path = "/login"
element = {
	<Login/>
}

그냥 진짜로 간단하게 해결 할 수 있다...
이런걸로 포스트 올리는게 맞나 싶지만 복습할겸 올립니다.