[React] React Router

Page Routing

: 웹서버가 요청에 명시되어 있는 경로에 따라 알맞은 페이지를 선택하고 페이지를 반환해서 사용자가 그 페이지에 접속하는 과정

Multipage Application (MPA) : 웹서버가 여러 개의 페이지를 가지고 있다가 요청이 들어오면 경로에 따라 해당 페이지를 보내줌. 브라우저가 웹페이지에 대한 데이터를 받으면 새로고침되면서 페이지를 이동 시키는 방식

Single Page Applicaiton(SPA) : 최소 한번 페이지 전체를 로딩한 이후 데이터만 변경하여 사용하는 방식,브라우저 내부에서 동작/ 사용 하는 동안 페이지 전환 요구하지 않음( 페이지이동 ⇒ 페이지 업데이트시킴)/페이지 전환 빠름

Client Side Rendering(CSR) : 클라이언트 측에서 알아서 페이지 렌더링

“React는 SPA방식을 따르면서 CSR로 페이지를 렌더링 한다”

---

# react-router-dom 사용환경 준비

npm으로 설치

npm install react-router-dom@6

# router component

⚫BrowserRouter

- SPA구조에서 전체적인 라우팅 구조를 잡는데 사용

import "./App.css";
import { BrowserRouter, Routes, Route } from "react-router-dom";


import Home from "./pages/Home";
import New from "./pages/New";
import Edit from "./pages/Edit";
import Diary from "./pages/Diary";

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <h2>App.js</h2>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/new" element={<New />} />
          <Route path="/edit" element={<Edit />} />
          <Route path="/diary/" element={<Diary />} />
        </Routes>
      </div>
    </BrowserRouter>
  );
}

export default App;

⚫Link

- 특정 주소로 넘어갈 수 있게 해줌

import {Link} from "react-router-dom";

const Router = () => {
	return (
     <>
      <Link to={"/"}>HOME</Link>
      <br />
      <Link to={"/diary"}>DIARY</Link>
      <br />
      <Link to={"/new"}>NEW</Link>
      <br />
      <Link to={"/edit"}>EDIT</Link>
      <br />
    </>
  );
};

#Hooks

⚫ useParams

App.js

<Route path="/diary/:id" element={<Diary />} /> 

Diary.js

import {useParams} from "react-router-dom";

const Diary = () => {
	const {id} = useParams();
    
    //...생략
    }

ex) localhost : 3000/diary/1

⚫ useSearchParams

import {useSearchParams} from "react-router-dom";

const Edit = () => {
  const [searchParams, setSearchParams] = useSearchParams();

  const id = searchParams.get("id");
  console.log("id:", id);

  const mode = searchParams.get("mode");
  console.log("mode:", mode);
  
  //...생략

→ /edit?id=10&mode=dark

⚫ useNavigate

import {useNavigate} from "react-router-dom";

const navigate = useNavigate();

//...생략

<button 
	onClick = {()=> { 
        navigate("/home");
       }}
    > HOME으로 가기 
</button> 
//지정한 페이지로 이동
      
      
      
<button
    onClick={() => {
        navigate(-1);
        }}
      > 뒤로가기
</button>
//한페이지 뒤로가기

참고사이트