반응 라우터

❮ 이전의 다음 ❯

Create React App은 페이지 라우팅을 포함하지 않습니다.

React Router는 가장 인기 있는 솔루션입니다.

반응 라우터 추가

애플리케이션에 React Router를 추가하려면 애플리케이션의 루트 디렉토리에 있는 터미널에서 다음을 실행하세요.

npm i -D react-router-dom

참고: 이 튜토리얼은 React Router v6을 사용합니다.

v5에서 업그레이드하는 경우 @latest 플래그를 사용해야 합니다.

npm i -D react-router-dom@latest

폴더 구조

여러 페이지 경로가 있는 응용 프로그램을 만들려면 먼저 파일 구조부터 시작하겠습니다.

폴더 내에서 여러 파일로 src이름이 지정된 폴더를 만듭니다 .pages

src\pages\:

Layout.js
Home.js
Blogs.js
Contact.js
NoPage.js

각 파일에는 매우 기본적인 React 구성 요소가 포함됩니다.

기본 사용법

index.js이제 파일 에서 라우터를 사용할 것 입니다.

예시

React Router를 사용하여 URL을 기반으로 페이지로 라우팅:

index.js:

import ReactDOM from "react-dom";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Layout from "./pages/Layout";
import Home from "./pages/Home";
import Blogs from "./pages/Blogs";
import Contact from "./pages/Contact";
import NoPage from "./pages/NoPage";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="blogs" element={<Blogs />} />
          <Route path="contact" element={<Contact />} />
          <Route path="*" element={<NoPage />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

예시 설명

우리는 콘텐츠를 먼저 <BrowserRouter>.

그런 다음 우리는 우리의 <Routes>. 응용 프로그램에는 여러 개의 <Routes>. 우리의 기본 예제에서는 하나만 사용합니다.

<Route>s는 중첩될 수 있습니다. 첫 번째 <Route>는 의 경로를 갖고 구성 요소 / 를 렌더링합니다 Layout.

중첩된 <Route>s는 부모 경로를 상속하고 추가합니다. 따라서 blogs경로는 부모와 결합되어 가 됩니다 /blogs.

구성 Home요소 경로에는 경로가 없지만 index속성이 있습니다. 그러면 이 경로가 상위 경로인 의 기본 경로로 지정됩니다 /.

로 설정하면 path정의 *되지 않은 모든 URL에 대해 포괄적인 역할을 합니다. 이것은 404 오류 페이지에 좋습니다.

인증을 받으세요!

React 모듈을 완료하고, 연습을 하고, 시험을 보고, w3schools 인증을 받으세요!!

$95 등록

페이지 / 구성 요소

구성 Layout요소에는 <Outlet>및 <Link>요소가 있습니다.

선택된 <Outlet>현재 경로를 렌더링합니다.

<Link>URL을 설정하고 인터넷 사용 기록을 추적하는 데 사용됩니다.

내부 경로에 연결할 때마다 <Link> 대신 을 사용합니다 <a href="">.

"레이아웃 경로"는 탐색 메뉴와 같은 모든 페이지에 공통 콘텐츠를 삽입하는 공유 구성 요소입니다.

Layout.js:

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

const Layout = () => {
  return (
    <>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/blogs">Blogs</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>
      </nav>

      <Outlet />
    </>
  )
};

export default Layout;

Home.js:

const Home = () => {
  return <h1>Home</h1>;
};

export default Home;

Blogs.js:

const Blogs = () => {
  return <h1>Blog Articles</h1>;
};

export default Blogs;

Contact.js:

const Contact = () => {
  return <h1>Contact Me</h1>;
};

export default Contact;

NoPage.js:

const NoPage = () => {
  return <h1>404</h1>;
};

export default NoPage;

❮ 이전의 다음 ❯

반응 튜토리얼

반응 후크

반응 연습

반응 라우터