useNavigate

// Layout.js

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

function Layout() {
  // useNavigate는 Link 사용 없이 페이지 이동
  const navigate = useNavigate();

  // 이전 페이지로 이동
  function goBack() {
    navigate(-1); // n은 앞으로 n 이동. -n은 뒤로 n이동
  }

  // articles 이동
  function goArticles() {
    // ''에 페이지 경로 적는 것도 가능
    // replace: true를 하면 현재페이지 기록이 남지 않음
    // 따라서 뒤로가기를 하면 -2만큼 이동
    // replace는 option. 기본값 false
    navigate('/articles', {replace: true});
  }
  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

• Link를 사용하지 않고 페이지 이동 가능
• navigate(-n): n만큼 뒤로 이동
• navigate(n): n만큼 앞으로 이동(앞으로 버튼 활성화 되어있을 시에만 작동)
• navigate('/page', {replace: true})
  • 따옴표 안에 페이지 경로를 직접 입력해도 됨
  • replace: true로 설정하면 현재 페이지 기록이 사라지면서 경로 이동
    • replace는 옵션이며, 기본값은 false
    • A에서 B로 이동 후 replace페이지로 넘어간 후 뒤로가기 버튼을 누르면 B는 기록에 남지 않으므로 A로 이동

NavLink

// Articles.js

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

function Articles() {
  // activeStyle을 미리 설정해둠
  const activeStyle = {
    color: 'green',
    fontSize: 21,
  }

  return (
    <div>
      <Outlet />
      <ul>
        <li>
          {/* NavLink에서 사용하는 경로와 현재 경로가 일치할 경우 CSS나 클래스 적용 */}
          {/* isActive 파라미터를 이용해 구분 */}
          <NavLink
            to='/articles/1'
            style={({isActive}) => isActive ? activeStyle : undefined}
          >
            게시글 1
          </NavLink>
        </li>
        <li>
          <NavLink
            to='/articles/2'
            style={({isActive}) => isActive ? activeStyle : undefined}
          >
            게시글 2
          </NavLink>
        </li>
        <li>
          <NavLink
            to='/articles/3'
            style={({isActive}) => isActive ? activeStyle : undefined}
          >
            게시글 3
          </NavLink>
        </li>
      </ul>
    </div>
  )
}

export default Articles

• NavLink는 Link경로와 현재 경로가 일치하는 경우 CSS나 className을 적용할 수 있음
  
• 파라미터의 {isActive}를 이용해 active 판별 후 적용
• activeStyle은 미리 위에 적어둠

• 결과화면

  

NavLink 코드 리팩토링

// Articles.js

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

function Articles() {
  return (
    <div>
      <Outlet />
      <ul>
        <ArticleItem id={1} />
        <ArticleItem id={2} />
        <ArticleItem id={3} />
      </ul>
    </div>
  )
}

function ArticleItem({id}) {
  const activeStyle = {
    color: 'green',
    fontSize: 21,
  };
  return (
    <li>
      <NavLink
        to={`/articles/${id}`}
        style={({isActive}) => isActive ? activeStyle : undefined}
      >
        게시글 {id}
      </NavLink>
    </li>
  )
}

export default Articles