[프런트엔드 지식] React 기반 통합(39) - React-Router의 기본 사용

React Foundation Consolidation (39) - React-Router의 기본 사용

1. 공유기 기본 사용법

라우터는 경로 변경에 대한 수신기를 포함하고 해당 경로를 하위 구성 요소에 전달합니다.

라우터에는 두 가지 API가 포함됩니다.

1. BrowserRouter는 기록 모드를 사용합니다.

2. HashRouter는 해시 모드를 사용합니다(경로 뒤에 # 포함).

프로젝트에서 HashRouter를 사용해 보십시오.

1. 라우터 설치

   npm install react-router-dom
   

2. index.js에서 HashRouter 도입 및 사용

   import React from "react";
   import ReactDOM from "react-dom/client";
   import App from "./App";
   import {
         
          BrowserRouter, HashRouter } from "react-router-dom";
   
   const root = ReactDOM.createRoot(document.getElementById("root"));
   root.render(
     <React.StrictMode>
       <HashRouter>
         <App />
       </HashRouter>
     </React.StrictMode>
   );
   

2. 경로 매핑 구성

1. 라우트: 모든 라우트를 래핑하고 그 사이의 라우트를 일치시킵니다(Router5.x는 스위치 구성요소를 사용함).

2. 경로: 경로는 경로 일치에 사용됩니다.

   • 경로 속성: 일치하는 경로를 설정하는 데 사용
   • element 속성: 경로 일치 후 렌더링된 컴포넌트 설정 (Router5.x는 component 속성 사용)
   • exact: 정확히 일치, 정확한 경로가 정확히 일치하는 경우에만 해당 구성 요소가 렌더링됩니다(Router6.x는 더 이상 이 속성을 지원하지 않음).

3. 링크 및 NavLink

   • 일반적으로 경로의 점프는 결국 요소로 렌더링될 링크 구성 요소를 사용하는 것입니다.
   • NavLink는 Link를 기반으로 일부 스타일 속성을 추가합니다.
   • to attribute: 점프할 경로를 설정하는데 사용

인터페이스를 구축하고 라우팅 매핑을 구성하고 App.jsx에서 Home 및 About 구성 요소를 도입하고 Routes, Route 및 Link를 통해 간단한 라우팅 점프를 구현해 보십시오.

import React, {
    
     PureComponent } from "react";
import {
    
     Route, Routes, Link } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";

export class App extends PureComponent {
    
    
  render() {
    
    
    return (
      <div className="app">
        <div className="header">
          <span>header</span>
          <div className="nav">
            <Link to="/home">首页</Link>
            <Link to="/about">关于</Link>
          </div>
          <hr />
        </div>
        <div className="content">
          {
    
    /* 映射关系： path => Component */}

          <Routes>
            <Route path="/home" element={
    
    <Home />} />
            <Route path="/about" element={
    
    <About />} />
          </Routes>
        </div>
        <div className="footer">Footer</div>
      </div>
    );
  }
}

export default App;

효과 보기:

NavLink를 사용한 후 active설정할 수 있는 라우팅 스타일은 다음과 같습니다.

1. src/style.css에서 활성 스타일을 구성합니다.

   .nav .active{
         
         
       color: red;
       font-size: 18px;
   }
   

2. App.jsx에서 NavLink로 링크 수정:

   import React, {
         
          PureComponent } from "react";
   import {
         
          Route, Routes, NavLink } from "react-router-dom";
   import Home from "./pages/Home";
   import About from "./pages/About";
   import "./style.css";
   
   export class App extends PureComponent {
         
         
     render() {
         
         
       return (
         <div className="app">
           <div className="header">
             <span>header</span>
             <div className="nav">
               <NavLink to="/home">首页</NavLink>
               <NavLink to="/about">关于</NavLink>
             </div>
             <hr />
           </div>
           <div className="content">
             {
         
         /* 映射关系： path => Component */}
   
             <Routes>
               <Route path="/home" element={
         
         <Home />} />
               <Route path="/about" element={
         
         <About />} />
             </Routes>
           </div>
           <div className="footer">Footer</div>
         </div>
       );
     }
   }
   
   export default App;
   
   

3. 효과 보기: