React router -1 setting, Basic Routing

설치 및 셋팅

터미널에 npm install react-router-dom@6 입력 후 설치

index.js 파일로 가서
import { BrowserRouter } from "react-router-dom"를 import 해오고
<BrowserRouter>로 App 컴포넌트를 감싼다.

(index.js)

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

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

사용 방법

app.js에서

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

3개를 react-router-dom 라이브러리에서 import 해온 뒤
Routes 안에 Route를 넣고 path=""에 해당경로 입력
element 안에 들어갈 내용이나 컴포넌트를 넣어 페이지를 분할 생성한다.

(app.js)

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

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

(페이지 이동버튼 (a tag) )

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