React Router

▶ React Router

• React에서 페이지 이동 처리(url 기준)

npm install react-router-dom

 

 

• 사용법

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


import Home from "./routes/Home";
import Movie from "./routes/Movie";

function App(){
	return <Router>
		<Switch>
			<Route path="/">
				<Home />
			</Route>
			<Route path="/movie">
				<Movie />
			</Route>
			<Route path="/">
				새로고침 뛸 Component
			</Route>
		<Switch>
	</Router>
}

 

• Browser
  • Browser Router (보통의 웹사이트처럼 입력한 url로 표기)
  • Hash Router (보통의 url에 추가적인 random값이 추가되어짐)
• Switch
  •  Route를 찾는 것 / 단 하나의 Route만 렌더링 하기 위함
• Route
  • url을 의미
  • 해당 url입력 시, 해당 component로 이동

 

• Link
  • 프로젝트 내에서 페이지 전환 시 사용하는 Component
  • a 태그를 이용할 수도 있지만 전체 재실행이 아닌 새로고침 없이 유저를 다른 페이지로 이동시켜주는 component

<Link to="/movie">{title}</Link>