react-router-dom 적용하기 (feat v6)

1. 우선 npm 추가, package.json에도 추가해준다

yarn add react-router-dom

 

2. App.js에 아래 추가 (index.js에 추가하는 사람도 있는데 취향차이다. )

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

 

 

3. 아래처럼 import 하고 코드를 쓴다.

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

 

 <BrowserRouter>
                <Header/>
                <Routes>
                    <Route exact path="/" element={<StartPage />} />
                    {/* Not Found */}
                    <Route render={() => <Navigate  to="/" />} />
                    <Route exact path="/Login" element={<LoginPage />} />
                </Routes>
                <Footer/>
            </BrowserRouter>

 

주의할 점이 react-router-dom v6 버전 이상으 사용하면 기존 블로그 글과 다르게 안되는 코드가 많다.

가령 Switch가 없거나 Redirect가 없거나... Switch의 경우는 Route로, Redirect의 경우는 Navigate 로 옮겨졌다고 한다.

 

component도 element가 되었고 { } 안에 넣어주는 형태로 변경되었다.

 

사용시에는 동일하게 

 

<Link to="Login"></Link>

이다. 거엄청바뀌었네