Route

React에서 페이지를 관리하기 위해 Route기능을 사용해보고자 한다.
그러기 위해서는 외부 라이브러리를 사용한다.

우선 npm install react-router-dom@6을 설치한다.

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

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

index.js파일로 가서 위와같이 셋팅한다.
역시 이해할 필요도 없고 외울 필요도 없다.
검색하면 다 나오기 때문이다.

웹사이트를 들어가면 abc.com/어쩌구 A페이지
abc.com/저쩌구 B페이지 이런식으로 보여질 때가 있다.

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>
  )
}

import는 꼭해줘야 한다.
위의 코드처럼 Routes로 감싸고 element에 html을 작성해주면 된다.
역시 코드가 더러워지기 때문에 component로 작성해주면 깔끔해 질 것이다.
아니면 폴더를 만들고 모아줘도 된다.

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

페이지 이동 코드는 Link를 사용하면 간단하게 이동이 가능해진다.