react router

a태그로 인한 페이지 전환은 중복되는 ui 재사용 불가하다는 큰 단점을 가졌고, 이런 문제점을 해결하고자 탄생한 게 리액트, 리액트는 ui 라이브러리이기 때문에 페이지 전환 하기 위한 라우터 패키지 다운해 사용해주면 된다.

npm install react\-router-dom 
: react router dom 은 react router에 dom 이 바인딩되어있다고 생각하면 된다.
웹개발자는 dom을 앱개발자는 native 설치

yarn add react-router-dom

 

App(){

return ( 

div
Routes 
Route path = "welcom" element={<Welcome/>}

 path에 경로,  element 속성에 컴포넌트 

 

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

라우터 사용 페이지에 넣어주고

const App = () => {
	return (
		<div className='App'>
            <BrowserRouter>
                <Header />
                <Routes>
                  <Route path="/" element={<Main />}></Route>
                  <Route path="/product/:productId" element={<Product />}></Route>
                  <Route path="*" element={<NotFound />}></Route>
                </Routes>
            </BrowserRouter>
		</div>

위와 같이 넣어주면 됨
아래 참고

[React] 6. React Router (리액트 라우터) 사용하기