React | 페이지 이동 시키기 : react-router-dom

페이지 이동시키는 데에 많은 애를 먹었기 때문에... 기록을 해둬야겠다. 

 

최신 리액트에서는 Switch 대신 Routes로 변경되었다. -> 일단 이걸 몰라서 에러 왕창... 

Routes로 바꿨는데 컴포넌트 전달에서 또 에러...

결국 해결한 방법은 아래와 같다. 

 

⭐

import React from 'react' ; 
import { BrowswerRouter, Routes, Route, Link } from 'react-router-dom';
import Home from './Home';

function App() {
	return (
    	<div>
       	  <BrowswerRouter>
            	<Link to="/">Home</Link>
                
                <Routes>
                	<Route path="/" element={<Home />} />
                </Routes>
            </BrowswerRouter>
        </div>
    );
}

export default App;

이전과 달라진 점은 앞에서 말했다싶이 Switch 대신 Routes를 사용하고

<Route><Home /></Route> 가 아닌 element={}로 컴포넌트를 전달한다.

 

또한 나는 Route만 사용하니 이동이 안돼서 Link를 사용하여 위의 형태를 유지해주어야 작동했다.

 

위와 같은 형식으로 원하는 페이지를 전부 넣어주면 된다.

 

추가로.. 시작하기 전에 꼭 npm install react-router-dom 이나 npm install로 설치하기 !!! ⭐

이 설치하는 것도 경로 확인을 잘 해주어야한다. 꼭 프로젝트에 들어와서 설치하기!