[React] React Router

<개요>

React에서의 페이지 이동을 처리하기 위해 React Router를 사용할 수 있다.

---

<적용방법>

1. 설치

> npm install react-router-dom 사용

2. 적용

> src/App.js 파일에 작업

> react-router-dom 을 임포트한다.

import { Route, Switch } from "react-router-dom";

> 각 컴포넌트의 경로를 설정해준다. 

   설정된 경로를 이용하여 페이지 호출 가능 (ex) http://localhost:3000/sub)

> 사용되는 컴포넌트들도 따로 임포트를 해주어야 호출 가능하다.

const App = () => {
  return (
    <BrowserRouter>
        <Routes>
          <Route path="/" element={<MainComponent />} />
          <Route path="/sub" element={<SubComponent />} />
        </Routes>
    </BrowserRouter>
  );
}
export default App;

 

※ Switch를 사용하시던 분은 최신 버전에서는 Routes로 명칭이 바뀌었다.

---

<참고>

https://goddaehee.tistory.com/305

[React] 6. React Router (리액트 라우터) 사용하기

https://www.npmjs.com/package/react-router-dom

react-router-dom