React-Router

유석현(SeokHyun Yu)·2022년 11월 27일

목록 보기

21/21

index.js

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

App.js

import { createBrowserRouter, RouterProvider } from "react-router-dom";
import Videos from "./pages/Videos";
import NotFound from "./pages/NotFound";
import Root from "./pages/Root";
import Home from "./pages/Home";
import VideoDetail from "./pages/VideoDetail";
import "./App.css";

// createBrowserRouter()로 각 경로마다 마운트 해줄 컴포넌트를 정의하고
// react-router를 사용하기 위해 RouterProvider 컴포넌트를 만들고 
// createBrowserRouter 함수로 정의한 router를 props로 넘겨주면 react-router를 사용할 수 있다
const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    errorElement: <NotFound />,
    {/* children에 정의하는 컴포넌트들은 Root 컴포넌트 안에 있는 Outlet에 마운트 된다 */}
    children: [
      // index가 true인 컴포넌트는 Root의 Outlet에 기본으로 보여짐
      { index: true, element: <Home /> },
      { path: "/videos", element: <Videos /> },
      { path: "/videos/:videoId", element: <VideoDetail /> },
    ],
  },
  // 이쪽에 path를 새로 작성하면 Root의 Outlet이 아니라 여기서 설정해준 새로운 컴포넌트가 Root대신 마운트됨
]);

function App() {
  return <RouterProvider router={router} />;
}

export default App;

Root.jsx

import { Outlet } from "react-router-dom";
import Navbar from "../components/Navbar";

export default function Root() {
  return (
    <div>
      <Navbar />
      <Outlet />
    </div>
  );
}

NotFound.jsx

export default function NotFound() {
  return <p>Not FOUND</p>;
}

Home.jsx

export default function Home() {
  return <p>HOME</p>;
}

Videos.jsx

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

export default function Videos() {
  const [text, setText] = useState("");

  // 특정 라우터로 이동할 수 있는 방법이 2가지 있음
  // 1. <Link to="/">temp</Link>
  // 2. useNavigate()
  const navigate = useNavigate();
  const handleChange = (e) => {
    setText(e.target.value);
  };
  const handleSubmit = (e) => {
    e.preventDefault();
    setText("");
    navigate(`/videos/${text}`);
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input type="text" name="" id="" value={text} onChange={handleChange} />
        <button>submit</button>
      </form>
    </div>
  );
}

VideoDetail.jsx

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

export default function VideoDetail() {
  // useParams()로 해당 페이지의 params 객체를 넘겨받을 수 있음
  const { videoId } = useParams();

  return <p>{videoId}</p>;
}