[React] Link, NavLink, state

Link란?

react-router-dom에서 제공하는 컴포넌트는 html의 a 태그와 기능은 유사하지만, 페이지 전환을 방지하는 기능이 내장되어 있다.
요소 클릭시 <도메인 경로>/<지정한경로>로 바로 이동하는 로직 구현시 용이한 컴포넌트이다.

import { Routes, Route, Link } from "react-router-dom";

function App() {
	return (
    	<li><Link to="/home">Home</Link></li>
        <li><Link to="/login">Login</Link></li>
    )
}

NavLink란?

NavLink는 Link의 특정 버전으로, 특정 링크에 스타일을 넣어줄 수 있다. 기존의 activeStyle과 activeClassName 속성은 style, className으로 변경되었다.
NavLink는 자체적으로 isActive라는 boolean 값을 가지고 있어 선언하여 활성화시키고 싶은 스타일에 css를 적용할 수 있다.
활성화(클릭)시 해당 요소의 클래스는 "active"로 변경된다.

import './App.css';
import { Routes, Route, Link, NavLink } from "react-router-dom";

const activeStyle = {
	color: 'red',
    textDecoration: 'underline'
}

const deactiveStyle = {
	color: 'black',
    textDecoration: 'none'
}

function App() {
	return(
    	<NavLink to="/home" style={({isActive}) => {
        	return isActive ? activeStyle : deactiveStyle;
        }}>Home</NavLink>
    )
}

UseNavigate

react router에서 지원하는 Hook, 지정한 경로로 페이지를 이동시킬 수 있다. 두번째 인자로 이동시킬 페이지에 함께 데이터를 지정할 수 있다.

import { useNavigate } from 'react-router-dom';

// ... 생략

const navigate = useNavigate();

// ... 생략

const gotoMain = () => {
	navigate("/main", {
    	state: {
        	user.uid
        }
    });
};

useNavigate를 사용하여 데이터를 보낼 때는 두 번째 인자의 state라는 속성으로 보내야 한다.

UseLocation

react router에서 지원하는 Hook, useNavigate를 이용해 전송된 데이터를 UseLocation을 사용하여 받을 수 있다.

import { useLocation } from 'react-router-dom';

// ...생략

const location = useLocation();

// ...생략

const [userId, setUserId] = useState(
	location.state?.userId
);

Link 태그를 통해 데이터 보내기

<Link to={`/main`} state={{ test: "hello world"}}>
	test
</Link>

main 페이지에서 useLocation을 사용하여 Link 태그를 통해 보낸 값을 받을 수 있다.

const location = useLocation();

var data = locaion.state.test;
console.log(data); // "hello world"

useNavigate replace 보내기

import { useNavigate } from 'react-router-dom';

// ...생략

const navigate = useNavigate();

// ...생략

const gotoMain = () => {
	navigate("/main", {replace : true});
}

✨ 기본값은 false이고, true면 페이지가 이동된 후 뒤로가기를 하더라도 이전 페이지로 돌아갈 수 없고, 루트로 돌아오게 된다. false는 뒤로가기 가능