[React-Router-Dom] Link와 NavLink, useNavigate

오늘은 Link와 NavLink, useNavigate에 대해 알아보겠습니다.

 

목차

 

[ Link vs NavLink ]

📌 Link

Link 컴포넌트의 경우 html의 <a> 태그와 기능이 유사하지만, 페이지 전환을 방지하는 기능이 내장되어 있습니다.

 

요소를 클릭 시 <도메인 경로>/<지정한 경로>로 바로 이동하는 로직 구현 시에 용이한 컴포넌트입니다.

 

import { Link } from "react-router-dom";
 
import classes from "./MainNavigation.module.css";
 
function MainNavigation() {
  return (
    <header className={classes.header}>
      <nav>
        <ul className={classes.list}>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/products">Products</Link>
          </li>
        </ul>
      </nav>
    </header>
  );
}
 
export default MainNavigation;

 

📌 NavLink

NavLink는 Link의 special version으로, isActive 속성을 이용하여 특정 링크에 스타일을 넣어줄 수 있습니다. 

 

import { NavLink } from "react-router-dom";
 
import classes from "./MainNavigation.module.css";
 
function MainNavigation() {
  return (
    <header className={classes.header}>
      <nav>
        <ul className={classes.list}>
          <li>
            <NavLink
              to="/"
              className={({ isActive }) =>
                isActive ? classes.active : undefined
              }
              //   style={({ isActive }) => ({
              //     color: isActive ? "white" : "red",
              //   })}
              end  // 모든 Link가 "/"로 시작하기 때문에 기본적인 "/"은 NavLink를 통해 다른 곳으로 이동해도 자동으로 활성화되게 된다. 
            >
              Home
            </NavLink>
          </li>
          <li>
            <NavLink
              to="/products"
              className={({ isActive }) =>
                isActive ? classes.active : undefined
              }
            >
              Products
            </NavLink>
          </li>
        </ul>
      </nav>
    </header>
  );
}
 
export default MainNavigation;
 

NavLink는 자체적으로 isActive라는 boolean값을 가지고 있어 활성화시키고 싶은 스타일에 css를 적용할 수 있습니다. 

 

또한, NavLink에는 end 프로퍼티가 존재하는데 위의 코드에서 end를 입력하지 않은 채로 실행시켜 보겠습니다.

 

※ active시 css 설정

 

 

 

 

다음과 같이 두 개의 NavLink 모두 활성화된 것을 확인할 수 있습니다.  

 

현재 코드의 목적은 Home이 클릭되면 Home이 활성화되고 Products가 클릭되면 Products가 활성화되어있음을 분간하기 위함인데 그렇지 못하고 있습니다. 

 

그 이유는 기본적으로 NavLink는 실제로 현재 활성인 라우트의 경로가 NavLink의 경로로 시작하는지 확인하기 때문입니다. 그리고 그 NavLink는 현재 활성인 라우트가 링크에 설정된 경로로 시작하면 활성인 것으로 간주됩니다. 

 

만일 중첩된 자녀 라우트에 있을 경우에도 링크를 활성으로 취급할 수 있게 하기 위해서 존재하는 좋은 기능이지만 여기서는 원치 않습니다. 

 

왜냐면 모든 라우트는 결국 /로 시작하기 때문입니다. 그래서 현재 모든 라우트에 대해 항상 활성화 되게 됩니다. 

 

이 현상을 방지하기 위해 react-router-dom은 end 프로퍼티를 제공하며 true나 false로 설정할 수 있으면 그냥 넣으면 true로 설정한 것과 같습니다. 

 

end 프로퍼티가 true일 경우 현재 활성화된 라우트의 URL의 경로가 이 경로로 끝나면 이 링크를 활성화된 것으로 간주화 됩니다. 

 

그럼 이제 이 링크는 도메인 뒤에 아무것도 없는 경우에만 활성으로 간주되는 것입니다. 

 

 

[ useNavigate ]

 

useNavigate 훅은 실행하게 되면 페이지 이동을 할 수 있게 해주는 함수를 반환합니다. 

 

반환받은 함수의 인자로 설정한 경로를 넘겨주면 해당 경로로 이동할 수 있습니다. 

 

LInk와 다른 점은 함수 호출을 통해 페이지를 이동하기 때문에 특정 조건을 충족할 경우에 페이지 이동을 하도록 할 수 있습니다.

 

import { useNavigate } from "react-router-dom";
 
const HomePage = () => {
    const navigate = useNavigate();
 
    const navigateHandler = () => {
        navigate('/products');
    }
  return (
    <>
      <h1>My Home Page</h1>
      <button onClick={navigateHandler}>Go Products Page</button>
    </>
  );
};
 
export default HomePage;
 

 

 

 

Go Products Page 버튼을 누르면 Products 페이지로 넘어가게 됩니다.