React 4(React Router)

얼렁뚱땅 공부했던 React 다시 공부하기~!

SPA(Single Page Application) 라우팅 과정

1. 브라우저에서 "/(root)"경로로 요청한다.
2. 서버에서 React Web App을 보낸다.
3. 브라우저에서 "/"경로에 맞는 컴포넌트를 보여준다.
4. React App에서 다른페이지로 이동하는 동작을 수행하면, 새로운 경로에 맞는 컴포넌트만 보여준다.

➡ 대표적으로 react-router-dom 패키지를 사용한다.

import { BrowserRouter, Routes, Route } from "react-router-dom";
import About from "./pages/About";
import Home from "./pages/Home";
import Profile from "./pages/Profile";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/profile" element={<Profile />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Dynamic 라우팅

1. parameters 사용하기

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/profile" element={<Profile />} />
        <Route path="/profile/:id" element={<Profile />} />
      </Routes>
    </BrowserRouter>
  );
}

function Profile() {
  let { id } = useParams();
  console.log(id); //2
  return <div>Profile page</div>;
}

:를 통해 설정하고, 사용하는 곳에서 useParams를 통해 가져와 사용한다.

2. queryString 사용하기

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

export default function About() {
  const { search } = useLocation();
  console.log(search);
  return <div>About page</div>;
}

- URLSearchParams 사용하기

http://localhost:3000/about?search=mark
import { useLocation } from "react-router-dom";

export default function About() {
  const { search } = useLocation();
  const obj = new URLSearchParams(search);
  console.log(obj.get("search")); //mark
  return <div>About page</div>;
}

• 단점 1. 모든 메서드를 다 기억하고 있어야한다.
• 단점 2. 브라우저 내장객체이기 때문에 브라우저에따라 지원하지 않는 브라우저가 있을 수 있다.

- query-string 사용하기

npm i query-string // query-string 설치하기

import { useLocation } from "react-router-dom";
import queryString from "query-string";

export default function About() {
  const { search } = useLocation();
  const query = queryString.parse(search);
  console.log(query); // {search: 'mark'}
  return (
    <div>
      <h2>About page</h2>
      {query.search && <p>name : {query.search}</p>}
    </div>
  );
}

v5에서 v6으로 바뀌면서 history를 사용하는 방식이 바뀌었다. 기존 history의 모든 기능은 useNavigate로 통합되었다.

NotFound

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/*" element={<h1>Not Found</h1>} />
        <Route path="/" element={<Home />} />
        <Route path="/profile" element={<Profile />} />
        <Route path="/profile/:id" element={<Profile />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

v6으로 바뀌면서 switch문을 더이상 지원하지 않게 되었다.

JSX링크 라우팅

<a href=""/> 를 사용해 페이지를 연결할 경우, 전체 페이지가 다시 로딩되기 때문에, <Link to=""/> 컴포넌트를 사용한다.

<Link to="/">Home</Link>
<Link to="/profile/1">Profile/1</Link>
<Link to="/about?name=mark">About?name=mark</Link>

JS라우팅

props를 통해 받아와 history.push()로 사용하던 방식이
useNavigate를 import해서 navigate = useNavigate();사용한다.

import { useNavigate } from "react-router-dom";
const navigate = useNavigate();
  
function goHome() {
  setTimeout(() => {
    navigate("/");
    //navigate(-1) = history.back()
  }, 1000);
}

Redirect

<Redirect to =""/>를 통해 Redirect를 시켜주었지만,
<Route/>의 element안에 <Navigate replace to =""/>를통해 Redirect시켜준다.

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

<Route
  path="/Login"
  element={isLogin ? <Navigate replace={true} to="/" /> : <Login />}
 />