[리액트] - 라우터 설치와 사용

라우터

 

url 마다 페이지 구분.

페이지 구분하는 것 = 라우팅

---

react-router-dom 설치

 

터미널 열어서 

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

설치가 잘 됐으면 npm start 해주기.

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

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

index.js 파일로 가서

App 에다가 BrowserRouter 을 감싸주면 끝

import도 상단에 해주기

---

라우터 사용하기

 

App.js 파일에서 import 해주기. 

'react-router-dom' 여기서 몇가지 컴포넌트들을 갖고와야 한다.

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

 

Routes 랑 Route 쓰는 방법

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

1) Routes 라는 컴포넌트를 작성

= Route 묶음이라 생각하면 될 듯.

2) 그리고 그 안에다가 Route 컴포넌트를 작성

- Route 라는 컴포넌트는 우리들의 페이지.

- 페이지 수 만큼 사용해주기.

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

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

---

페이지 이동 버튼
-  Link 태그
- to 라는 속성 사용 = 경로적기용 속성

 

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

페이지 전체같은 걸 컴포넌트로 만들기.