[React] React Router의 부가기능

1. useNavigate

useNavigate는 Link 컴포넌트를 사용하지 않고, 다른 페이지로 이동해야 할 때 사용가능한 Hook이다.

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

const Layout = () => {
  const navigate = useNavigate();
  
  const goBack = () => {
    //이전 페이지로 이동
    navigate(-1);
  };
  
  const goArticles = () => {
    //articles 경로로 이동
    navigate('/articles');
  };
  
  return (
    <div>
    	<header style = {{ background : 'lightgray', padding : 16, fontSize : 24}}>
    		<button onClick = {goBack}>뒤로가기</button>
			<button onClick = {goArticles}>게시글 목록</button>
		</header>
	<main>
        <Outlet />
    </main>
	</div>
	);
};

export default Layout;

navigate의 함쉐서 숫자 타입의 파라미터를 받았을 때 -1이면 뒤로 한번 가고, -2이면 뒤로 두번 갑니다. 양수라면 반대로 앞 페이지로 넘어가겠지요!

아니면 이렇게 작성도 가능합니다.

const goArticles = () => {
  navigate('/articles', { replace : true });
}

replace : true 설정이 되어 있어서 home페이지로 이동하게 된닷.

2. NavLink

navlink 컴포넌트는 링크에서 사용하는 경로가 현재 라우트 경로와 일치하는 겨우 특정 스타일이나 CSS 클래스를 적용할 수 있는 것이다.

<NavLink
	style = {({isActive}) => isActive ? activeStyle : undefined}
/>

<NavLink
	className = {({isActive}) => isActive ? 'active' : undefined}
/>

이렇게 스타일을 적용하여 사용 가능하다.
실전에서는 이렇게~

import { NavLink, Outlet } from 'react-router-dom';

const Articles = () => {
  const activeStyle = {
    color : 'green',
    fontSize : 21,
  };
  
  return (
    <div>
    	<Outlet />
    		<ul>
    			<li>
    				<NavLink 
    					to = "/articles/1"
    					style = {({ isActive }) => (isActive ? activeStyle : undefined)}
  					>
                게시글 1
					</NavLink>
				</li>
			</ul>
		</div>

3. NotFound 페이지 만들기

사전에 정의되어 있지 않은 페이지로 사용자가 진입하였을 때의 페이지를 만들어 보자!
NotFound와 관련된 컴포넌트를 하나 만들어줍니다. 그리고 그것을 메인에 import하여 아래와 같이 코드를 작성해보자.

import NotFound from './pages/NotFound';

const App = () => {
  return (
    <Routes>
    	<Route path = "*" element = {<NotFound />} />
	</Routes>
	);
};

*는 와일드카드로, 아무 텍스트나 매칭한다는 뜻! 라우트의 규칙을 확인하고, 매치되는 게 없다면 NotFound가 매치되겠지요.

4. Navigate 컴포넌트

Navigate 컴포넌트는 컴포넌트를 화면에 보여주는 순간, 다른 페이지로 이동하고 싶을 때 사용합니다. 즉 페이지를 리다이렉트 할 때 사용해야겠다.

로그인이 필요한 페이지인데, 로그인을 안했다면 로그인 페이지를 보여주어야 할 때! 그럴 때!

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

const MyPage = () => {
  const isLoggedIn = false;
  
  if (!isLoggedIn) {
    return <Navigate to = "/login" replace = {true} />;
  }
  
  return <div>마이페이지</div>
};

브라우저 주소창에 /mypae 경로로 들어가는 순간 login 페이지로 이동된다. 왜냐하면 replace = {true} 설정을 해두었기 떄문!!