[웹] react-router-dom 을 활용하여 페이지 이동하기

📝 react-router-dom을 활용하여 페이지 이동을 구현한다.

🚩 react-router-dom 설치

$ npm install react-router-dom

🚩 React Router 사용

{/*App.js*/} 

import {BrowserRouter,Route,Routes} from 'react-router-dom';
import Study from './component/Study';
import Study_play from './component/Study_play';


function App() {
  return (
    <div className="App">      
      <BrowserRouter>
        <Routes>
          <Route exact path="/" element={<Study />}/>
          <Route exact path="study_play" element={<Study_play/>} />
        </Routes>
      </BrowserRouter>   
    </div>
  );
}

export default App;

✔️ 브라우저의 url과 컴포넌트를 연결하는 작업이다.
✔️ react-router-dom에서 BrowserRouter, Routes, Route 를 가져와서 사용하였다.

{/*Study.js*/} 

<Link to={"study_play"}>
   <div className="level_component">자음</div>
</Link>

✔️ 일단 Study.js에 있는 '자음' 을 누르면 Study_play.js 페이지로 이동할 수 있게 해놓았다.