Next.js useSelectedLayoutSegment | 현재 있는 페이지의 주소를 알고 싶은 경우

next의 공식문서에 따르면,

 

" useSelectedLayoutSegment 는 클라이언트 컴포넌트 훅으로 이 것이 불러와진 레이아웃의 한 단계 아래의 경로 segment를 알 수 있다. 

 

이 훅은 nav UI (특히, tab과 같이 그 주소 segment에 따라서 스타일이 바뀌는경우) 에 유용하다."

 

만일 내가 '/home' 에 있다면, 아래 코드를 작성했을 때 home이 불러와진다. 

import { useSelectedLayoutSegment } from "next/navigation";
-------------
const segment = useSelectedLayoutSegment();
console.log(segment); //home

 

한단계 더 밑의 경로까지 알고 싶다면, 

 

ex) /home/a

`useSelectedLayoutSegments()` 를 사용하면 된다. 

 

 

아래처럼 삼항연산자의 조건으로 사용하면 tab등 nav 메뉴 클릭시 css 효과를 줄 때 유용하다!!

"use client";

import { useSelectedLayoutSegment } from "next/navigation";
import Link from "next/link";

export default function NavMenu() {
	const segment = useSelectedLayoutSegment();
	console.log(segment);

	return (
		<>
			<li>
				<Link href="/home">
					<div>
						{segment === "home" ? (
							<>
								<div style={{ fontWeight: "bold" }}>홈이당</div>
							</>
						) : (
							<>
								<div>홈아니당</div>
							</>
						)}
					</div>
				</Link>
			</li>

 

 

더 고급진? 예시는 아래 공식문서 참고하자.

Functions: useSelectedLayoutSegment | Next.js