React - Router, Link 사용법

React나 Vue 등등을 사용할때는 Router가 필연적으로 사용된다.

Router란 SPA에서 페이지 간 이동을 가능하게 해주는 라이브러리 이다.

https://east-hyun.tistory.com/37 (SPA가 뭔지 보려면)

(React) SPA -> Single Page Application

 

일단 Router를 사용하기 위해서는 준비 과정이 필요하다.

1. index.js에 들어가서 <App />에 <BrowserRouter>를 씌워준다. (App.js에 해도 되긴함.)
- 안된다면 위에 imprt { BrowserRouter } from "react-router-dom"; 을 써야한다. - 

2. Route를 사용할때 <Routes> 태그 안에 사용해야된다.

import { Routes, Route } from 'react-router-dom'

<Routes>
<Route path="/" element={}></Route>   
<Route path="home" element={}></Route>   // home으로 가는 router
<Routes>

//path -> 가고싶은 경로 element -> 넣을 내용

 

또  Link란 페이지 이동을 위한 링크를 만든다. html의 <a>태그와 비슷함.
하지만, 전체 페이지를 새로고침 하지않고 경로만 변경한다.

import {Link} from 'react-router-dom'

<Link to="/">index</Link>

<Link to="home">Home</Link>

 

이렇게 생성하면 페이지를 이동하는 링크가 생긴다.

만약 모양을 바꾸고 싶다면  to="/" 뒤에 className을 넣어서 커스터마이징 하면된다.