React Foundation Consolidation (39) - React-Router の基本的な使用法

1. ルーターの基本的な使い方

Router にはパス変更用のリスナーが含まれており、対応するパスをサブコンポーネントに渡します。

ルーターには 2 つの API が含まれています。

BrowserRouter は履歴モードを使用します
HashRouter はハッシュモードを使用します (パスの後に # が付きます)

プロジェクトで HashRouter を使用してみます。

ルーターのインストール
```
npm install react-router-dom
```

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. ルートマッピングの設定

ルート: すべてのルートをラップし、それらの間でルートを照合します (Router5.x は Switch コンポーネントを使用します)。
ルート: ルートはパスのマッチングに使用されます
- path 属性: 一致したパスを設定するために使用されます
- element 属性: パスを一致させた後、レンダリングされたコンポーネントを設定します (Router5.x は、component 属性を使用します)
- 正確: 完全一致、正確なパスが正確に一致する場合にのみ、対応するコンポーネントがレンダリングされます (Router6.x はこのプロパティをサポートしなくなりました)
リンクとナビリンク
- 通常、パスのジャンプには Link コンポーネントが使用され、最終的には要素としてレンダリングされます。
- NavLink は、リンクに基づいていくつかのスタイル属性を追加します。
- to 属性: ジャンプ先のパスを設定するために使用されます。

インターフェイスを構築してルーティングマッピングを構成し、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;

効果を確認します。

画像-20230730155901266

画像-20230730155926793

NavLink を使用した後、active設定できるルーティングスタイルは次のとおりです。

src/style.css でアクティブなスタイルを構成します。

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

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;

効果を確認します。

画像-20230730161132539

【フロントエンド知識】React基盤の統合(39) - React-Routerの基本的な使い方

React Foundation Consolidation (39) - React-Router の基本的な使用法

1. ルーターの基本的な使い方

2. ルートマッピングの設定

おすすめ