yarn add react-router-dom //react-router-dom 설치
src폴더 하위에 pages폴더 생성 후 페이지별 파일 생성
shared라는 폴더를 만든 후 그안에 Router.js파일을 생성
//예시
import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "../pages/Home";
import About from "../pages/About";
import Contact from "../pages/Contact";
import Works from "../pages/Works";
import Layout from "./Layout";
const Router = () => {
return (
<BrowserRouter>
<Layout>
<Routes>
<Route path="/" element={<Home />} />
<Route path="about" element={<About />} />
<Route path="contact" element={<Contact />} />
<Route path="works" element={<Works />} />
</Routes>
</Layout>
</BrowserRouter>
);
};
export default Router;
import "./App.css";
import Router from "./shared/Router";
function App() {
return <Router />;
}
export default App;
return (
<button
onClick={() => {
navigate("/works"); // 클릭시 works로 이동하게 해주는 router hook이다.
}}
>
works로 이동
</button>
사용자가 현재 머물러있는 페이지에 대한 정보를 알려주는 hooks이다.
객체 형식으로 보여주기 때문에 location.state로 접근할 수 있다.
a태그 대신에 사용가능하며 페이지를 넘어갈때 쓰임
import { Link, useLocation } from "react-router-dom";
const Works = () => {
const location = useLocation();
console.log("location :>> ", location);
return (
<div>
<div>{`현재 페이지 : ${location.pathname.slice(1)}`}</div>
<Link to="/contact">contact 페이지로 이동</Link>
</div>
);
};
export default Works;
라우트 경로에 특정 id 값을 넣어 해당하는 페이지로 이동할 수 있게 하는 것을 동적라우팅 라고 한다.
참고자료
라우터 사용시 파라미터 정보를 가져와 활용할 수 있게 해주는 훅이다.
참고자료