react - 페이지 이동 - Link, NavLink

Link는 페이지 이동을 시켜준다.

a태그와 다르게 새로고침 없이 이동시켜준다.

 

NavLink라는 것도 있다. Link와 같은 역할이지만

isActive라는 속성을 통해 현재 페이지 경로가 일치했을 때 스타일 변화를 줄 수 있다.

 

import React from 'react'
import { Link, NavLink } from 'react-router-dom'
import styles from '../styles/Header.module.css'

const activeStyle = {
  "color": "white",
}

const inactiveStyle = {
  "color": "black",
}
const Header = () => {
  return (
    <div>
      <div className={styles.nav}>
        <div className={styles.navMenu}>
          <NavLink className={styles.menu} to='/' style={({isActive}) => {
            return isActive ? activeStyle : inactiveStyle;
          }}>홈</NavLink>
          <NavLink className={styles.menu} to='/share_place' style={({isActive}) => {
            return isActive ? activeStyle : inactiveStyle;
          }}>공유 장소</NavLink>
          <NavLink className={styles.menu} to='/my_page' style={({isActive}) => {
            return isActive ? activeStyle : inactiveStyle;
          }}>마이 페이지</NavLink>
        </div>
        <div className={styles.navMenuAuth}>
          <Link className={styles.menu}>로그인</Link>
          <Link className={styles.menu}>회원가입</Link>
        </div>
      </div>
    </div>
  )
}

export default Header