-
React Router 버전 5 , 6 문제 해결 및 차이점 (react-router-dom)React/React 2023. 2. 23. 20:36
1. 설치하는법
//설치 $ npm install router-react-dom // 삭제 $ npm uninstall router-react-dom // 재설치 $ npm install router-react-dom@5
2. package.json 파일의 dependencies 부분의 react-router-dom 부분의 버전을 아래와 같이 변경한 후 터미널에 npm i를 통해 재설치 하는 방법도 있다.
// before "dependencies": { ... "react-router-dom": "^6.1.6", ... }, // after "dependencies": { ... "react-router-dom": "^5.3.0", ... },
📌 3. 5버전과 6버전의 차이
✔️ 5버전은 Switch 와 Route를 이용한다.
function Router() { return ( <BrowserRouter> <Switch> <Route path={"/:coinId"}> <Coins /> </Route> <Route path="/"> <Coin /> </Route> </Switch> </BrowserRouter> ); } export default Router;
✔️ 6버전은 Routes 와 Route 를 이용한다.
function Router() { return ( <BrowserRouter> <Routes> <Route path="/" element={<Coins/>} /> <Route path="/:coinId" element={<Coin/>} /> </Routes> </BrowserRouter> ); } export default Router;
'React > React' 카테고리의 다른 글
React 기본 css 제거하기 (0) 2023.02.25 React useParams() 사용법 (0) 2023.02.23 useEffect 에서 return 문을 왜 쓰이는걸까? (0) 2023.02.14 React 조건에 따라 component 렌더링 시 가독성 좋은 두 가지 방법 (0) 2023.02.07 onClick으로 전달되는 함수형태에 따른 차이 (0) 2023.02.01