Link

보통 웹 페이지에서 링크를 보여줄 때 a태그를 사용하지만 a태그는 클릭 시 페이지를 새로 불러오기 떄문에 원페이지 웹 페이지에는 맞지 않다.
Link 컴포넌트를 사용하는데, 생김새는 a태그를 사용하지만, History API를 통해
브라우저 주소의 경로만 바꾸는 기능이 내장되어 있다.

<Link to="이동할 주소" >컨텐츠</Link>

Link 예제

import { Route, Routes } from 'react-router-dom'
import Home from './components/Home'
import Intro from './components/Intro'
import Page1 from './components/Page1'
import Page2 from './components/Page2'
import Page3 from './components/Page3'
import { Link } from 'react-router-dom'

import './App.css'

function App() {


  return (
    <div>
  
      <ul>
        <li> <Link to={"/"}>Intro</Link></li>
        <li> <Link to={"/Home"}>Home</Link></li>
        <li> <Link to={"/Page1"}>Page1</Link></li>
        <li> <Link to={"/Page2"}>Page2</Link></li>
        <li> <Link to={"/Page3"}>Page3</Link></li>
      </ul>

      <Routes>
        <Route path={'/'} element={<Intro />}>
          <Route path={'/Home'} element={<Home />}></Route>
          <Route path={'/Page1'} element={<Page1 />}></Route>
          <Route path={'/Page2'} element={<Page2 />}></Route>
          <Route path={'/Page3'} element={<Page3 />}></Route>
          <Route path={'*'} element={<h1>이것은 잘못된 경로입니다</h1>}></Route>
        </Route>
      </Routes>

    </div>
  )
}

export default App

NavLink

기존의 Link와 비슷하지만 활성화 시 특정 스타일을 부여하고 싶을 경우 사용할 수 있다.

<NavLink to="이동할 주소“ style={부여스타일}>컨텐츠</NavLink>

https://reactrouter.com/en/main/components/nav-link

import { Route, Routes } from 'react-router-dom'
import Home from './components/Home'
import Intro from './components/Intro'
import Page1 from './components/Page1'
import Page2 from './components/Page2'
import Page3 from './components/Page3'
import { NavLink } from 'react-router-dom'

import './App.css'

function App() {

const activestyle={
  color:"green",
  fontSize : 20,
}

  return (
    <div>
  
      <ul>
        <li> <NavLink to={"/"}>Intro</NavLink></li>
        <li> <NavLink to={"/Home"}
         style={({isActive})=> isActive?activestyle:''}>Home</NavLink></li>
        <li> <NavLink to={"/Page1"}>Page1</NavLink></li>
        <li> <NavLink to={"/Page2"}>Page2</NavLink></li>
        <li> <NavLink to={"/Page3"}>Page3</NavLink></li>
      </ul>

      <Routes>
        <Route path={'/'} element={<Intro />}>
          <Route path={'/Home'} element={<Home />}></Route>
          <Route path={'/Page1'} element={<Page1 />}></Route>
          <Route path={'/Page2'} element={<Page2 />}></Route>
          <Route path={'/Page3'} element={<Page3 />}></Route>
          <Route path={'*'} element={<h1>이것은 잘못된 경로입니다</h1>}></Route>
        </Route>
      </Routes>

    </div>
  )
}

export default App

위와 같이 스타일을 객체 선언하고 불러와서 Active 스타일을 지정할 수 있다.
또 다른 방법으로는 아래와 같이 태그 안에 스타일을 직접 넣을 수 있다.
단, 두가지를 혼용해서 사용할 수는 없으니 주의 ❗

 <li> <NavLink to={"/Page1"}
          style={({ isActive }) => isActive ? {fontSize : 20,color:"green" } : undefined }>Page1</NavLink></li>