0818 react

react

router

• 라우팅
  : 사용자가 요청한 URL에 알맞는 페이지를 보여주는 행위

리액트는 SPA이기에 라우팅은 굉장히 중요하고 필수적인 개념

라우터돔 (리액트 라우터 라이브러리)
https://reactrouter.com/

npm install react-router-dom

app.js에서 라우터를 사용할 수 있도록 index.js에서 import
(전체 프로젝트에서 라우터 돔을 사용할 수 있도록)

index.js 파일

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

root.render(
	<React.StrictMode>
		<BrowserRouter>
   	 		<App />
  		</BrowserRouter>
	</React.StrictMode>
);

App.js 파일

import { Routes, Route } from 'react-router-dom';
import { Home, About, Events, Products, Contact } from './page';

function App() {
  return (
   <div>
   	<Routes>
        <Route path='/' element={<Home />}/>
        <Route path='/about' element={<About />}/>
        <Route path='/events' element={<Events />}/>
        <Route path='/product' element={<Products />}/>
        <Route path='/contact' element={<Contact />}/>
      </Routes>
   </div>
  );
}

Routes / Route

Link 컴포넌트 ->
html의 a태그와 비교해서 알아보기

데이터 전달 방식

querystring ?name=value
url+id ==> urlparametr 방식

1) URL 파라미터

2) Qeury String