React-router-dom

1. 터미널에 dom 설치

npm install react-router-dom

제대로 설치되었는지

 

2.설치 확인

package.json의 dependencies의 아래 코드가 있는지 확인

    "react-router-dom": "^6.8.1",

 

3. BrowserRouter import

index.js로 와서 import 

import {BrowserRouter} from 'react-router-dom'

 

4. 태그 삽입 (index.js)

  <React.StrictMode>
    <BrowserRouter><App /></BrowserRouter>
  </React.StrictMode>

5. import (App.js)

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

 

6. 연결할 페이지 import (App.js)

import Home from "./pages/Home";
import Signup from "./pages/Signup";
import Signin from "./pages/Signin";
import Todo from "./pages/Todo";

7. Link 태그 (App.js)

        <Link to="/">Home</Link>

 

8. Route 구성 (App.js)

 

화면 전환을 위해 route를 구성한다

browser path? 가 바뀔때마다 어떤 component를 매핑해서 보여주는지 route 태그 안에 정의

<Routes>
<Route path="/" element={<Home/>}></Route>
...
 <Route path="/Todo" element={<Todo/>}></Route>
</Routes>

 

페이지 전환 성공! 🥳