React Router Dom v6

React Router Dom v6은 이전 버전에서 약간의 변경 사항이 있으며 정말 좋습니다.

React 라우터는 반응 애플리케이션을 위한 클라이언트 측 라우팅입니다. 이해하고 사용하기가 매우 쉽습니다. 또한 반응 개발자들 사이에서 가장 인기가 있습니다.

If you prefer a video tutorial then check out this:

이제 CRA를 시작하겠습니다. 터미널에 아래 코드를 붙여넣습니다.

npx create-react-app my-app

If you want, you can follow along this tutorial in Codesandbox

이 튜토리얼에서는 불필요한 파일을 모두 제거하겠습니다. 반응 앱 트리 구조는 다음과 같아야 합니다.



자, 이제 src 폴더에 두 개의 폴더를 만들겠습니다.

페이지 -> 이 폴더에는 모든 페이지 구성 요소가 들어 있습니다.

구성 요소 -> 이 폴더에는 재사용 가능한 구성 요소가 모두 들어 있습니다.

이제 폴더 구조는 다음과 같습니다.

js 폴더의 각 pages 파일은 페이지 구성 요소를 나타냅니다.
현재 이 페이지 구성 요소는 페이지 이름만 반환하고 있습니다.


App 구성 요소의 모든 페이지를 가져오도록 하겠습니다.

import Home from "./pages/Home";
import About from "./pages/About";
import Contact from "./pages/Contact";
import Services from "./pages/Services";
import Profile from "./pages/Profile";

const App = () => {
  return (
    <>
      <Home />
      <About />
      <Contact />
      <Services />
      <Profile />
    </>
  );
};

export default App;

앱을 시작하겠습니다. 터미널에서 http://localhost:3000/에서 앱을 시작할 벨로우즈 스크립트를 작성할 것입니다.

npm start

우리 앱은 모든 페이지 구성 요소를 동시에 렌더링합니다.



이것은 우리가 원하는 것이 아닙니다. / 경로에 있는 홈페이지가 홈 페이지만 렌더링하기를 원하며 경로/about로 이동하면 정보 페이지만 표시되어야 합니다.

React Router Dom은 이 문제를 해결하고 적절한 클라이언트 측 라우팅을 제공합니다.

프로젝트에 React Router Dom을 설치해 봅시다.

npm install react-router-dom@6

그러면 패키지 json의 종속성에 반응 라우터가 추가됩니다.

{
  "name": "react-router-dom-crash-course",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.2.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "^5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

계속해서 프로젝트에서 사용하겠습니다. index.js 파일에서 BrowserRouter에서 react-router-dom를 가져옵니다. App 구성 요소를 BrowserRouter로 래핑합니다. 이렇게 하면 전체 프로젝트에 대한 액세스 권한이 react-router-dom에 부여됩니다.

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

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

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

다음으로 App 구성 요소로 이동합니다. 여기서 우리는 react-router-dom에서 두 가지를 가져올 것입니다. 하나는 Routes이고 다른 하나는 Route입니다. 아이디어는 Routes 저희 싱글 Route 을 모두 감싸드립니다 . 하나의 구성 요소부터 시작하겠습니다.

import Home from "./pages/Home";
import About from "./pages/About";
import Contact from "./pages/Contact";
import Services from "./pages/Services";
import Profile from "./pages/Profile";

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

const App = () => {
  return (
    <>
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </>
  );
};

export default App;

위의 예에서 볼 수 있듯이 Route는 두 가지 속성을 사용합니다. 하나는 path로 페이지에 표시하려는 URL 위치 경로이고 두 개는 페이지 구성 요소와 같은 element입니다. 따라서 홈 페이지가 첫 페이지에 표시되기를 원하므로 경로/ 및 요소<Home />를 지정합니다.

다른 모든 페이지에 대해 Route를 생성하겠습니다.

import Home from "./pages/Home";
import About from "./pages/About";
import Contact from "./pages/Contact";
import Services from "./pages/Services";
import Profile from "./pages/Profile";

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

const App = () => {
  return (
    <>
      <Routes>
          <Route path="/" element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="contact" element={<Contact />} />
          <Route path="services" element={<Services />} />
          <Route path="services" element={<Profile />} />
      </Routes>
    </>
  );
};

export default App;

/about 경로로 이동하면 About 페이지 구성 요소 렌더링만 표시됩니다. 대단한 진전!

이제 우리는 사용자가 다른 페이지로 이동하기 위해 URL 경로를 변경하는 것을 원하지 않습니다.
이제 components 폴더에 매우 간단한 탐색을 만들어 보겠습니다. components 폴더에 Nav.js라는 파일을 생성합니다.

const Nav = () => {
  return (
    <>
      <ul>
        <li>Home</li>        
        <li>About</li>     
        <li>Contact</li>      
        <li>Services</li>
        <li>Profile</li> 
      </ul>
    </>
  );
};

export default Nav;

우리는 이 탐색에 약간의 스타일을 부여할 것입니다.

ul {
  list-style: none;
  width: 100%;
}

ul li {
  display: inline;
  margin: 50px;
}

괜찮은! 이제 개별 탐색 항목을 적절한 경로에 추가해야 합니다. 따라서 탐색 항목home의 경우 사용자를 경로/로 안내해야 합니다. 이를 위해 React Router에는 Link라는 자체 앵커 태그가 있습니다. Link는 따를 경로를 지정하는 하나의 속성to을 사용합니다. 이것을 to 태그에서 href로 생각하시면 됩니다. 따라서 Nav.js 파일은 다음과 같아야 합니다.

import { Link } from "react-router-dom";
const Nav = () => {
  return (
    <>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/contact">Contact</Link>
        </li>
        <li>
          <Link to="/services">Services</Link>
        </li>
        <li>
          <Link to="/profile">Profile</Link>
        </li>
      </ul>
    </>
  );
};

export default Nav;

이제 애플리케이션을 다시 살펴보면 React Router Dom 덕분에 페이지 간 라우팅이 있는 작동하는 탐색 모음이 있습니다. 🎉

비디오에서 저는 React Router Dom 버전 6과 함께 제공되는 두 가지 추가 기능에 대해 이야기했습니다.

중첩 경로 &

404 페이지를 찾을 수 없음 경로

이 링크에서 비디오를 확인하십시오.