(React Router v6) React-1에서 라우터 사용하기

by


(React Router v6) React-1에서 라우터 사용하기 1

라우터 v5는 설명되지 않습니다.

React-router-dom은 여러 구성 요소로 구성됩니다.

몇 가지 예를 들자면

'추천 관련글,

1. 브라우저 라우터

React Router는 여러 유형의 라우터를 지원합니다.

React Native에도 NativeRouter가 있습니다.

현재 앱이 아닌 브라우저에서 실행되는 웹 개발을 하고 있습니다.

따라서 “브라우저 라우터”로 기억할 수 있습니다.

BrowserRouter는 단순 URL(클린 URL이라고 함)을 사용하여 브라우저의 주소 표시줄에 현재 위치를 저장합니다.

그리고 브라우저의 내장 기록 스택을 사용하여 탐색합니다.

처음으로 프로젝트를 실행할 때 모든 앱이 실행될 이 구성 요소를 포함해야 합니다.

일반적으로 index.js 또는 App.js입니다.

Vite로 프로젝트를 시작했기 때문에 main.jsx에 있습니다.

샘플 코드

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";
import { BrowserRouter } from "react-router-dom";

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

이러한 방식으로 전체 앱 구성 요소를 래핑하면 기본 라우팅 설정이 완료됩니다.

2. 노선

앱의 아무 곳에서나 렌더링됩니다.

경로 구성 요소 현재 위치에서 아래의 서브루트 세트와 일치합니다.

하위 경로는 -구성 요소. (아이는 s가 없습니다.

주의하십시오.)

위치가 변경될 때마다 모든 하위 경로를 반복하여 가장 일치하는 하위 경로를 찾아 조정하고 적절한 UI를 그립니다.

내면의 어린 시절 중첩될 수 있습니다.

그 의미는, 내에서 할 수 존재하다.

요약하자면,

경로(s 포함)에는 이동할 경로가 포함되어야 합니다.

경로에는 홈페이지 내에서 이동하려는 주소를 씁니다.

세 번째 경로(경로 내의 자식)

경로에 들어가는 매개변수에 대해 기억해야 할 것은 경로와 요소입니다.

Path에는 가고자 하는 주소를 입력하고, Element에는 그릴 UI가 포함된 컴포넌트의 이름을 적습니다.

샘플 코드

import { Route, Routes } from "react-router-dom";
import "./App.css";
import BookList from "./pages/BookList";
import Home from "./pages/Home";

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

export default App;

그것이 적다면

홈 구성 요소는 localhost:000에 나타납니다.

BookList 구성 요소는 localhost:000/books에 표시됩니다.

주소를 개별적으로 입력하기 어려우므로 해당 컴포넌트로 이동하는 링크 연결을 생성합니다.

일반적으로 다른 주소에 연결할 때 href 속성을 사용합니다.

-태그,

React Router는 대신 to 속성을 사용합니다.

-태그.

이렇게 하면 React에서 필요한 부분만 변경할 수 있습니다.

샘플 코드

import { Link, Route, Routes } from "react-router-dom";
import "./App.css";
import BookList from "./pages/BookList";
import Home from "./pages/Home";

function App() {
  return (
    <>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/books">Books</Link>
          </li>
        </ul>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/books" element={<BookList />} />
      </Routes>
    </>
  );
}

export default App;

현재 화면


(React Router v6) React-1에서 라우터 사용하기 2

내 홈 구성 요소 코드에 Welcome Home이 표시되어 있기 때문입니다.

Home.jsx 코드

import React from "react";

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

export default Home;

이상한 점은 위의 링크를 클릭하여 다른 컴포넌트로 전환하면,

이는 전체 화면이 업데이트되지 않음을 의미합니다.

React Router는 필요한 경로 내에서 전체 페이지를 새로 고치지 않습니다.

신속하게 교체해야 하는 부품만 교체하십시오.

이 부분이 매우 중요합니다.

다음 기사에서는 HashRouter와 HistoryRouter를 살펴보겠습니다.