NavLink, Link

import React from "react";
import { Link,Outlet } from "react-router-dom";

const Articles = () => {

  return (
    <div>
      <ul>
        <li>
          <Link to={"/articles/1"}>게시글 1</Link>
        </li>
        <li>
          <Link to={"/articles/2"}>게시글 2</Link>
        </li>
        <li>
          <Link to={"/articles/3"}>게시글 3</Link>
        </li>
      </ul>
    </div>
  );
};

export default Articles;

 

Link 먼저.

앞서 봐왔듯 그 Link임.

그냥 to={'경로'} 해서 보낼 수 있는.

 

 

그 다음 NavLink

NavLink는 그냥 Link에 정말 간단한 기능 추가시킨 건데,

바로 자신의 경로가 선택되었다면 저 Link(html요소 상에서는 a태그)에 active라는 클래스를 붙여주는 거임.

그냥 ul>li>a.active 라던지 해서 scss에서 활용해서 쓰면 됨.