React 라우터 셋팅,기본 라우팅

페이지 나누고 싶을때 일반 html css js 사이트는 html파일 여러개 만들면 되는데

리액트는 html 파일을 하나만 사용함

아무튼 react에서 여러 페이지 만들고 싶을땐 router 라이브러리 사용하면 됨

---

react-router-dom 설치하려면

터미널 열어서

npm install react-router-dom@6 입력해서 설치

셋팅은 index.js 파일로 가서

import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
      <BrowserRouter>
        <App />
      </BrowserRouter>
  </React.StrictMode>
); 

import 어쩌구 해오고 BrowserRouter 이거로 App 감싸면 끝임

---

라우터로 페이지 나누는 법

다른 웹사이트를 잘 살펴보면

jae.com/어쩌구 로 접속하면 A페이지를 보여주고

jae.com/저쩌구 로 접속하면 B페이지를 보여줌

이런 식으로 url 경로마다 다른 페이지를 보여주고 싶으면 이렇게 작성

 (App.js)

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

function App(){
  return (
    (생략)
    <Routes>
      <Route path="/detail" element={ <div>상세페이지임</div> } />
      <Route path="/about" element={ <div>어바웃페이지임</div> } />
    </Routes>
  )
}

1. 우선 상단에서 여러가지 컴포넌트를 import 해오고

2. <Routes 만들고 그 안에 <Route를 작성합니다.

3. <Route path="/url경로" element={ <보여줄html> } />

그래서 방금 페이지 2개 만든거임

---

이 url 경로는 메인페이지임 잘 보면 path값에 / 밖에 없음

<Route path="/" element={ <div>메인페이지에서 보여줄거</div> } /> 

---

페이지 이동 버튼은

유저들은 보통 링크타고 페이지 이동하기 때문에 링크 만들고 싶으면

react-router-dom 에서 Link 컴포넌트 import해오고

원하는 곳에서 <Link 쓰면 됨

<Link to="/">홈</Link>
<Link to="/detail">상세페이지</Link>

이러면 각각 url경로로 이동하는 링크 생성할 수 있음