[리액트 스터디] 7장. 라우트(Route) + 동적경로 설정

1. BrowserRouter 감싸기

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
👉import { BrowserRouter } from 'react-router-dom';

ReactDOM.createRoot(document.getElementById('root')).render(
  👉<BrowserRouter>
    <App />
  </BrowserRouter>
)

2. Routes/Route 설정

import { Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import New from "./pages/New";
import Diary from "./pages/Diary";
import Notfound from "./pages/Notfound";

// 1. "/" : 모든 일기를 조회하는 Home
// 2. "/new" : 새로운 일기를 작성하는 New
// 3. "/diary": 일기를 조회하는 Diary
function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/new" element={<New />} />
      <Route path="/diary" element={<Diary />} />
      <Route path="*" element={<Notfound />} />
    </Routes>
  )
}
export default App

❗❗ Routes 유의점

✔ Routes 태그 안에는 Route 밖에 못들어간다.
✔ Routes 태그 바깥에 있는 태그들은 모든 페이지 공통으로 들어간다.

3. Link 태그

👉import { Routes, Route, Link } from "react-router-dom";
import Home from "./pages/Home";
import New from "./pages/New";
import Diary from "./pages/Diary";
import Notfound from "./pages/Notfound";

// 1. "/" : 모든 일기를 조회하는 Home
// 2. "/new" : 새로운 일기를 작성하는 New
// 3. "/diary": 일기를 조회하는 Diary
function App() {
  return (
    <div className="App">
      <div>
        👉<Link to={"/"}>Home</Link>
        <Link to={"/new"}>New</Link>
        <Link to={"/diary"}>Diary</Link>
      </div>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/new" element={<New />} />
        <Route path="/diary" element={<Diary />} />
        <Route path="*" element={<Notfound />} />
      </Routes>
    </div>
  )
}
export default App

🚩 Link태그는 a태그처럼 사용

4. useNavigate

👉import { Routes, Route, Link, useNavigate } from "react-router-dom";
import Home from "./pages/Home";
import New from "./pages/New";
import Diary from "./pages/Diary";
import Notfound from "./pages/Notfound";

// 1. "/" : 모든 일기를 조회하는 Home
// 2. "/new" : 새로운 일기를 작성하는 New
// 3. "/diary": 일기를 조회하는 Diary
function App() {
👉const nav = useNavigate();
  const onClickButton = () => {
👉  nav("/new");
  };

  return (
    <div className="App">
      <div>
        <Link to={"/"}>Home</Link>
        <Link to={"/new"}>New</Link>
        <Link to={"/diary"}>Diary</Link>
      </div>
👉    <button onClick={onClickButton}>New 페이지로 이동</button>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/new" element={<New />} />
        <Route path="/diary" element={<Diary />} />
        <Route path="*" element={<Notfound />} />
      </Routes>
    </div>
  )
}
export default App

5-1. 동적경로 지정 - useParams

App.jsx

...
function App() {
  ...
  return (
    <div className="App">
      ...
      <Routes>
        ...
👉      <Route path="/diary/:id" element={<Diary />} />
        <Route path="*" element={<Notfound />} />
      </Routes>
    </div>
  )
}
export default App

Diary.jsx

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

const Diary = () => {
    const params = useParams();

    return (
        <div className="Diary">{params.id}번 일기입니다&</div>
    );
}
export default Diary;

5-2. 동적경로 지정(쿼리스트링ver) - useSearchParams

Home.jsx (예시)

import { useSearchParams } from "react-router-dom";
const Home = () => {
    const [params, setParams] = useSearchParams();
    return (
        <div className="Home">{params.get("value")}홈</div>
    );
}
export default Home;

❗❗ 쿼리스트링ver은 Route 부분에서 따로 수정해 줄 필요 X