React Router

해당 게시글은 React Router의 공식 문서 및 Youtube를 공부한 토대로 작성되었습니다. 혹시라도 잘못된 부분이 있는 경우 꼭 댓글을 남겨주세요 🏃‍♀️ 🏃‍♀️

Non-React Websites

• initial request
• 서버가 index.html를 보내줌
• 만약에 새로운 서브 페이지 클릭 시 클라이언트는
  request /path를 요청함.
• 서버가 path.html를 보내줌.

React Websites

• initial request
• 서버가 index.html + 컴파일된 리액트 자바스크립트 파일
• 리액트는 빈 페이지에 컨트롤을 가지고 페이지를 삽입
• 만약에 서브 페이지 클릭 시, 리액트는 DOM을 업데이트한다.
  ( /path 에 맞는 컴포넌트를 삽입함)

React Router

• 웹사이트 바로가기
• 명령어 : npm install react-router-dom@6
  👉 @6는 버전을 의미한다.

- <BrowserRouter>

-<BrowserRouter>는 웹 브라우저에 사용된다.

• <BrowserRouter>는 History API 처럼 웹 애플리케이션에서 페이지를 새로고침하지 않고도 주소를 변경할 수 있는 역할
• A <BrowserRouter> navigates using the browser's built-in history stack.

- <Routes> and <Route>

  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />} />
      <Route path="expenses" element={<Expenses />} />
      <Route path="invoices" element={<Invoices />} />
    </Routes>
  </BrowserRouter>

• <Route>는 if문과 비슷하다고 생각하면된다. 만약에 path가 해당 URL을 가리킨다면 해당 path의 element를 렌더링 하게 된다.
• URL 변경 시, <Routes> 는 자신의 모든 children을 확인해본 후 해당되는 <Route> 엘리먼트를 렌더링 한다.

- <Link>

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

function Home() {
  return (
    <div>
      <h1>Home</h1>
      <nav>
        <Link to="/">Home</Link> |{" "}
        <Link to="about">About</Link>
      </nav>
    </div>
  );

• 다른 웹페이지로 이동하는 a태그를 페이지 이동없이 페이지를 변환하도록 해줌

- <NavLink>

import * as React from "react";
import { NavLink } from "react-router-dom";

function NavList() {
  // This styling will be applied to a <NavLink> when the
  // route that it links to is currently selected.
  let activeStyle = {
    textDecoration: "underline"
  };

  let activeClassName = "underline"

  return (
    <nav>
      <ul>
        <li>
          <NavLink
            to="messages"
            style={({ isActive }) =>
              isActive ? activeStyle : undefined
            }
          >
            Messages
          </NavLink>
        </li>
        <li>
          <NavLink
            to="tasks"
            className={({ isActive }) =>
              isActive ? activeClassName : undefined
            }
          >
            Tasks
          </NavLink>
        </li>
      </ul>
    </nav>
  );
}

• <Link>태그와 결이 같음. 다만, <NavLink>의 경우 본인이 active한지 안한지 구별할 수 있음!
• <NavLink> 사용 시 isActive라는 값으로 active한지 안한지 구별할 수 있음

- Nested Routes

• 이름처럼 라우트가 중첩되는 경우 사용
• 예를 들면, [ 블로그 클릭 > 블로그 제목 클릭 > 블로그 내용 ] 처럼 링크가 중첩되는 형태.

  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />}>
        <Route path="expenses" element={<Expenses />} />
        <Route path="invoices" element={<Invoices />} />
      </Route>
    </Routes>
  </BrowserRouter>,

• 만약에 expenses 페이지로 이동 시 URL의 경우 / + expenses
• 여기서 / 의 path를 가진 부모 라우트를 가진 App의 컴포넌트는 공통으로 사용되면서 자식 컴포넌트인 Expenses와 Invoices만 변경된다 👉 이게 가능하도록 하려면 하단의 <Outlet/>개념을 알아야 함.

- <Outlet>

export default function App() {
  return (
    <div>
      <h1>Bookkeeper</h1>
      <nav
        style={{
          borderBottom: "solid 1px",
          paddingBottom: "1rem"
        }}
      >
        <Link to="/invoices">Invoices</Link> |{" "}
        <Link to="/expenses">Expenses</Link>
      </nav>
      <Outlet />
    </div>
  );
}

• 상단의 nested routes를 봐야 이해됨! 😁
• 부모 컴포넌트인 App은 같이 사용할 컴포넌트를 적어주고, 자식 컴포넌트를 위치시킬 부분에 <Outlet/>을 적어준다.
• <Outlet/>은 두 자식을 path별로 바꿔주는 역할을 한다.
• 22.01.21 추가 ) <Outlet/>은 자식 path의 컴포넌트 영역을 마크하는 구간이라 생각하면 된다!

- "No Match" Routes path="*"

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="dashboard" element={<Dashboard />} />
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}

• 해당 라우트는 어느 URL이든 될 수 있지만, 가장 낮은 우선순위를 갖고 있기 때문에 URL 중 매치되는 라우트가 없다면 해당 URL이 사용될 것이다.

- Index Routes

<Route path="invoices" element={<Invoices />}>
  <Route index element={<InvoiceBase/>}/> 🚩
  <Route path=":invoiceId" element={<Invoice />} />
</Route>

• 깃발이 있는 부분을 보면 <Route/>에 path 대신 index라는 prop이 들어가있다.
• 해당 컴포넌트의 경우 부모와 같은 path를 공유한다고 생각하면 쉽다.
• 나 같은 경우에는 invoice의 base component라고 생각한다. 즉, base component가 렌더링되고 있지만 만약에 자식 컴포넌트의 URL로 이동시 해당 컴포넌트는 사라진다.

- useNavigate

👉 v5에서는 useHistory 었다가 명칭이 변경됨.

• hook의 이름처럼 홈페이지 위치에 관련됨
• 두가지 방법으로 useHistory를 이용할 수 있다

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

function SignupForm() {
  let navigate = useNavigate();

  async function handleSubmit(event) {
    event.preventDefault();
    await submitForm(event.target);
    navigate("../success", { replace: true });
  }

  return <form onSubmit={handleSubmit}>{/* ... */}</form>;
}

• 1. 첫번째 값으로 링크, 두번째 값으로 option {replace, state} 를 넣는다.
• 2. navigate(-1)처럼 입력가능

- :style 과 useParams

import { Routes, Route, useParams } from "react-router-dom";

function App() {
  return (
    <Routes>
       // 2️⃣ 1번에서 받은 값은 param이 된다.
       // `:`키워드 사용하여 param이 있다고 알려줌.
      <Route path="invoices" element={<BlogList />}>
        <Route path=":id" element={<BlogDetails />} />
      </Route>
    </Routes>
  );
}

function BlogDetails() {
  // 3️⃣ 하단 문구를 통해 id를 Route에서 받아옴.
  let { id } = useParams();
  return <h1>Blog {id}</h1>;
}

const BlogList = ({ blogs }) => {
  return (
    <div className="blog-list">
      <h2>All Blogs 💙</h2>
      {blogs.map((blog) => (
        <div className="blog-preview" key={blog.id}>
          // 1️⃣ 이곳에서 param에 어떤 값이 들어가는 지 설정.
          <Link to={`/blogs/${blog.id}`}>
            <h3>{blog.title}</h3>
            <p> Written By {blog.author} </p>
          </Link>
        </div>
      ))}
      <Outlet />
    </div>
  );
};

1. 웹 링크에서 parameter의 값을 설정하기
2. 해당 값을 받아올 Route 설정 : 키워드 사용
3. useParams훅을 사용해서 라우트에서 설정한 params를 받아옴.

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

export default function Invoice() {
  let params = useParams();
  return <h2>Invoice: {params.invoiceId}</h2>;
}

• 이렇게도 사용 가능!

- useSearchParams

• 기본적으로 URL을 나눌 때 /를 사용하지만, search params의 경우 ?를 사용함
• 예시 : "/login?success=1"
  👉 실습 후 다시 정리 예정

- useRoutes

• <Routes>와 <Route>대신 사용
• the fuctional equivalent of <Routes>
• uses JS objects instead of <Route> elements
• don't require JSX

import * as React from "react";
import { useRoutes } from "react-router-dom";

function App() {
  let element = useRoutes([
    {
      path: "/",
      element: <Dashboard />,
      children: [
        {
          path: "messages",
          element: <DashboardMessages />
        },
        { path: "tasks", element: <DashboardTasks /> }
      ]
    },
    { path: "team", element: <AboutPage /> }
  ]);

  return element;
}