5分でReactルーティングについてお教えします

// コンポーネント更新メカニズム:
// 親コンポーネントが再レンダリングされる限り、すべてのコンポーネントのサブツリーも更新されます // パフォーマンスの最適化 // 1. 状態を減らす

// 2. 不要な再レンダリングを避ける（パフォーマンスの最適化）
// shouldComponentUpdate(nextProps, nextState) { .... }
// フック関数はブール値を返します。更新する場合は true、更新しない場合は false です // 手動で実装することも可能ですが、面倒です // 3. 実際の公式サイトでは、shouldComponentUpdate ロジックがすでに実装されている純粋なコンポーネントを提供しています // props と状態を比較して更新するかどうかを決定するのに役立ちます // 通常のコンポーネント: class App extends React.Component
// 純粋なコンポーネント: クラス App は React.PureComponent を拡張し、通常のコンポーネントと比較して追加のデータ比較プロセスを実行します。 // たとえば、コンポーネントをレンダリングする必要がある場合、パフォーマンスの低下は非常に大きくなります。このとき、意味のない更新を避けるために純粋なコンポーネントを検討できます。 // すべてのシナリオで純粋なコンポーネントが必要なわけではありません。通常は、通常のコンポーネントを使用する必要があります。 import React from 'react'
'react-dom' から ReactDOM をインポートします。

クラスAppはReact.PureComponentを拡張します。
  状態 = {
    nameList: ['帥鵬', '呂布', '張飛'],
    現在の名前: ''、
  }
  与える（） {
    console.log('アプリレンダリング')
    戻る （
      <div>
        <h1>私はアプリコンポーネントです</h1>
        <h3>結果: {this.state.currentName}</h3>
        <button onClick={this.handleClick.bind(this)}>名前を展開します</button>
      </div>
    ）
  }
  ハンドルクリック() {
    const randomIndex = parseInt(Math.random() * this.state.nameList.length)
    const currentName = this.state.nameList[ランダムインデックス]

    this.setState({
      現在の名前、
    })
    コンソール.log(現在の名前)
  }

  // 要件: 状態の値が変更されていない場合は、不必要な更新を避けるために更新する必要はありません // shouldComponentUpdate(nextProps, nextState) {
  // if (this.state.currentName === nextState.currentName) {
  // falseを返す
  // } それ以外 {
  // true を返す
  // }
  // }
}
ReactDOM.render(<App></App>, document.getElementById('root'))

// 4. 純粋コンポーネントの使用に関する注意 (純粋コンポーネントにサブコンポーネントがある場合、サブコンポーネントも純粋コンポーネントである必要があります (すべて純粋コンポーネント))
// (1) 純粋コンポーネントは内部的に浅い比較を実行するため、値型は問題なく、複合型はアドレスのみを比較します // (2) 純粋コンポーネントを使用してデータを更新する場合、単純型は問題ありませんが、複合型が更新されると、アドレスを変更する必要があります (新しいオブジェクト/新しい配列)

'react' から React をインポートします
'react-dom' から ReactDOM をインポートします。

クラスAppはReact.PureComponentを拡張します。
  状態 = {
    nameList: ['帥鵬', '呂布', '張飛'],
    現在の名前: ''、
    オブジェクト: {
      名前: 'zs',
      年齢: 18歳
    },
  }
  与える（） {
    console.log('アプリレンダリング')
    戻る （
      <div>
        <h1>私はアプリコンポーネントです</h1>
        <p>名前: {this.state.obj.name}</p>
        <p>{this.state.nameList}</p>
        <button onClick={this.handleClick.bind(this)}>値を変更</button>
      </div>
    ）
  }
  ハンドルクリック() {
    // オブジェクトを更新するには、新しいオブジェクトを準備します // const obj = { ...this.state.obj }
    // オブジェクト名 = 'ls'
    // this.setState({
    // オブジェクト: オブジェクト,
    // })
    // 配列を更新するには、新しい配列を準備します // this.setState({
    // nameList: [...this.state.nameList, '王五'],
    // })
    const arr = [...this.state.nameList]
    arr.push('王武')
    this.setState({
      名前リスト: arr,
    })
  }
}
ReactDOM.render(<App></App>, document.getElementById('root'))

'react' から React をインポートします
'react-dom' から ReactDOM をインポートします。
'react-router-dom' から { HashRouter、Link、Route } をインポートします。

// ルーティングの使用法:
// 1. yarn add react-router-dom をダウンロードする
// 2. react-router-dom は多くのコンポーネントを含むパッケージです // 3. HashRouter コンポーネントはルーティング オブジェクト全体であり、1 つのプロジェクトに対して 1 つで、プロジェクト全体のコンテンツをラップする必要があります // 4. Link コンポーネントはリンクにレンダリングされ、ルーティング ジャンプに使用でき、パスを構成します // 5. Route コンポーネントはルーティング ルール (どのパスがどのコンポーネントに一致するか) を構成し、ルーティング アウトレットでもあります。
// 各ルートは互いに独立しています。パスが一致していれば、設定されたコンポーネントを表示できます。 // 3 つの関数コンポーネントを定義します。const Home = () => <div>私は Home コンポーネントです</div>
const Login = () => <div>私はログインコンポーネントです</div>
const User = () => <div>私はユーザーコンポーネントです</div>

クラスAppはReact.PureComponentを拡張します。
  与える（） {
    戻る （
      <div>
        <h1>私はアプリコンポーネントです</h1>
        <ul>
          <li>
            <Link to="/home">ホーム</Link>
          </li>
          <li>
            <Link to="/login">ログイン</Link>
          </li>
          <li>
            <Link to="/user">ユーザー</Link>
          </li>
        </ul>

        パスがアドレスバーのパスと一致する限り、構成されたコンポーネントが表示されます*/
        <ルート パス="/home" コンポーネント={Home}></ルート>
        <ルート パス="/login" コンポーネント={ログイン}></ルート>
        <ルート パス="/user" コンポーネント={User}></ルート>
      </div>
    ）
  }
}
ReactDOM.render() は、
  <ハッシュルーター>
    <アプリ></アプリ>
  </ハッシュルーター>,
  ドキュメント.getElementById('ルート')
）

'react' から React をインポートします
'react-dom' から ReactDOM をインポートします。
'react-router-dom' から HashRouter を Router、Link、Route としてインポートします。

// ルーターコンポーネントには、HashRouter と BrowserRouter の 2 つのタイプがあります。
// 1. HashRouter の基盤となる実装は、アドレスバーのハッシュ値、アンカージャンプの実装に基づいています。 // 2. BrowserRouter の基盤となる実装は、h5 の履歴 API に基づいていますが、アドレスバーには# がありません。
// (開発用として使用する場合は問題ありませんが、オンラインにする場合はバックグラウンド設定が必要です)

// 3 つの関数コンポーネントを定義します const Home = () => <div>私は Home コンポーネントです</div>
const Login = () => <div>私はログインコンポーネントです</div>
const User = () => <div>私はユーザーコンポーネントです</div>

クラスAppはReact.PureComponentを拡張します。
  与える（） {
    戻る （
      <div>
        <h1>私はアプリコンポーネントです</h1>
        <ul>
          <li>
            <Link to="/home">ホーム</Link>
          </li>
          <li>
            <Link to="/login">ログイン</Link>
          </li>
          <li>
            <Link to="/user">ユーザー</Link>
          </li>
        </ul>

        パスがアドレスバーのパスと一致する限り、構成されたコンポーネントが表示されます*/
        <ルート パス="/home" コンポーネント={Home}></ルート>
        <ルート パス="/login" コンポーネント={ログイン}></ルート>
        <ルート パス="/user" コンポーネント={User}></ルート>
      </div>
    ）
  }
}
ReactDOM.render() は、
  <ルーター>
    <アプリ></アプリ>
  </ルーター>,
  ドキュメント.getElementById('ルート')
）

'react' から React をインポートします
'react-dom' から ReactDOM をインポートします。
'react-router-dom' から HashRouter を Router、NavLink、Route としてインポートします。
'./index.css' をインポートします

// リンク コンポーネントと NavLink コンポーネント // 1. リンクとしてレンダリングされ、ルート ジャンプに使用され、パスが構成されているリンク コンポーネント // デフォルトのリンクには、強調表示されたクラス名はありません // 2. NavLink コンポーネント、リンクとしてレンダリングされ、ルート ジャンプに使用され、パスが構成されているリンク コンポーネント // (1) NavLink では、パスが一致すると、強調表示されたクラス名がアクティブになります
// (2) activeClassName を使用して強調表示されたクラス名を設定できます // (3) activeStyle を使用してタグと強調表示スタイルを直接設定できます // (4) あいまい一致 to="/home" は /home /home/aa と一致します
// 完全一致、正確な属性を設定する必要があります。to="/home" は /home のみに一致し、/home のみが強調表示されます // 3 つの関数コンポーネントを定義します const Home = () => <div>私は Home コンポーネントです</div>
const Login = () => <div>私はログインコンポーネントです</div>
const User = () => <div>私はユーザーコンポーネントです</div>

クラスAppはReact.PureComponentを拡張します。
  与える（） {
    戻る （
      <div>
        <h1>私はアプリコンポーネントです</h1>
        <ul>
          <li>
            <ナビリンク
              ちょうど
              に="/"
              activeStyle={{ color: 'red', fontSize: '30px' }}
            >
              ホーム</NavLink>
          </li>
          <li>
            <NavLink to="/login" activeClassName="選択済み">
              ログイン</NavLink>
          </li>
          <li>
            <NavLink to="/user" activeClassName="選択済み">
              ユーザー</NavLink>
          </li>
        </ul>

        パスがアドレスバーのパスと一致する限り、構成されたコンポーネントが表示されます*/
        <ルート パス="/home" コンポーネント={Home}></ルート>
        <ルート パス="/login" コンポーネント={ログイン}></ルート>
        <ルート パス="/user" コンポーネント={User}></ルート>
      </div>
    ）
  }
}
ReactDOM.render() は、
  <ルーター>
    <アプリ></アプリ>
  </ルーター>,
  ドキュメント.getElementById('ルート')
）

/**インデックス.css*/
。アクティブ {
  色: 赤;
  フォントサイズ: 30px;
}
.選択された{
  色: 青;
  フォントサイズ: 30px;
}

'react' から React をインポートします
'react-dom' から ReactDOM をインポートします。
'react-router-dom' から HashRouter を Router、NavLink、Route、Switch としてインポートします。
'./index.css' をインポートします

// ルート コンポーネント // 機能: ルーティングのエクスポートでもあるルーティング ルールを設定できます。パスが一致する限り、設定されたコンポーネントがここに表示されます // <Route path="/login" component={Login}></Route>
// 1. 各ルートは互いに独立しています（複数の同一パスを構成し、異なるコンポーネントを表示することも可能です）
// 2. Route で設定されたパスもあいまい一致であり、exact で正確に一致させることができます // 3. パスが設定されていない場合は、設定されたコンポーネントがデフォルトで表示されます // Switch コンポーネントと連携して 404 ページの設定を完了します // Switch コンポーネント: 複数の Route コンポーネントをラップして、最初に一致する Route コンポーネントを表示し、それ以降の Route コンポーネントは表示しないようにすることができます // 定義された関数コンポーネント const Home = () => <div>私は Home コンポーネントです</div>
const Login = () => <div>私はログインコンポーネントです</div>
const User = () => <div>私はユーザーコンポーネントです</div>
const Error = () => <div>404 ページです。アクセスしたいページは存在しません!!!</div>

クラスAppはReact.PureComponentを拡張します。
  与える（） {
    戻る （
      <div>
        <h1>私はアプリコンポーネントです</h1>
        <ul>
          <li>
            <ナビリンク
              ちょうど
              に="/"
              activeStyle={{ color: 'red', fontSize: '30px' }}
            >
              ホーム</NavLink>
          </li>
          <li>
            <NavLink to="/login" activeClassName="選択済み">
              ログイン</NavLink>
          </li>
          <li>
            <NavLink to="/user" activeClassName="選択済み">
              ユーザー</NavLink>
          </li>
        </ul>

        パスがアドレスバーのパスと一致する限り、構成されたコンポーネントが表示されます*/
        <スイッチ>
          <ルート パス="/" コンポーネント={ホーム} 正確></ルート>
          <ルート パス="/login" コンポーネント={ログイン}></ルート>
          <ルート パス="/user" コンポーネント={User}></ルート>
          <ルート コンポーネント = {エラー}></ルート>
        </スイッチ>
      </div>
    ）
  }
}
ReactDOM.render() は、
  <ルーター>
    <アプリ></アプリ>
  </ルーター>,
  ドキュメント.getElementById('ルート')
）

'react' から React をインポートします
'react-dom' から ReactDOM をインポートします。
輸入 {
  ルーターとしてのHashRouter、
  ナビリンク、
  ルート、
  スイッチ、
  リダイレクト、
} 'react-router-dom' から
'./index.css' をインポートします

// リダイレクトコンポーネント: どこからどこにジャンプするかをリダイレクトできます // React では、ネストされたルートを設定するのは非常に簡単です。ネストされたサブルートを記述する必要がある場所に Route コンポーネントを直接記述するだけです // 前提条件: 構成するネストされたサブルートのパスには、親ルートのパスが含まれている必要があります // 定義された関数コンポーネント const Home = () => (
  <div>
    <h3>私はホームコンポーネントです</h3>
  </div>
）
const ログイン = () => (
  <div>
    <h3>私はログインコンポーネントです</h3>
  </div>
）
// ------------------------------------------------------------------------
// 要件: User コンポーネント内には個人情報とコレクションも含まれています const User = () => (
  <div>
    <h3>私はユーザーコンポーネントです</h3>
    <ルート パス="/user" 正確なコンポーネント = {UserDefault}></ルート>
    <ルート パス="/user/info" コンポーネント={Info}></ルート>
    <ルート パス="/user/star" コンポーネント={Star}></ルート>
  </div>
）
const UserDefault = () => <div>私はデフォルトのユーザーコンテンツです</div>
const Info = () => <div>私はInfoコンポーネントです</div>
const Star = () => <div>私は Star コンポーネントです</div>

// -----------------------------------------------------------------------
const Error = () => <div>404 ページです。アクセスしたいページは存在しません!!!</div>

クラスAppはReact.PureComponentを拡張します。
  与える（） {
    戻る （
      <div>
        <h1>私はアプリコンポーネントです</h1>
        <ul>
          <li>
            <ナビリンク
              ちょうど
              に="/"
              activeStyle={{ color: 'red', fontSize: '30px' }}
            >
              ホーム</NavLink>
          </li>
          <li>
            <NavLink to="/login" activeClassName="選択済み">
              ログイン</NavLink>
          </li>
          <li>
            <NavLink to="/user" activeClassName="選択済み">
              ユーザー</NavLink>
          </li>
        </ul>

        パスがアドレスバーのパスと一致する限り、構成されたコンポーネントが表示されます*/
        <スイッチ>
          <ルート パス="/" コンポーネント={ホーム} 正確></ルート>
          <リダイレクト元="/home" から="/" へ></リダイレクト>
          <ルート パス="/login" コンポーネント={ログイン}></ルート>
          <ルート パス="/user" コンポーネント={User}></ルート>
          <ルート コンポーネント = {エラー}></ルート>
        </スイッチ>
      </div>
    ）
  }
}
ReactDOM.render() は、
  <ルーター>
    <アプリ></アプリ>
  </ルーター>,
  ドキュメント.getElementById('ルート')
）

'react' から React をインポートします
'react-dom' から ReactDOM をインポートします。
'react-router-dom' から HashRouter を Router、Route、Link としてインポートします。
'./index.css' をインポートします

// 動的ルーティングのパラメータ情報を取得したい場合は、props を通じて取得する必要があります。
// Route は、ルート関連の情報とメソッドを props を通じてコン​​ポーネントに渡します // const Product = (props) => <div>私は製品コンポーネントです</div>

クラスProductはReact.Componentを拡張します。
  与える（） {
    // this.props パラメータ // (1) history はルートへのジャンプ方法を保存します // (2) location は現在のルートアドレスを保存します // (3) match は動的ルートパラメータを保存します console.log(this.props)
    コンソールログ(this.props.match.params.id)
    戻る （
      <div>
        <h3>私は製品コンポーネントです - {this.props.match.params.id}</h3>
        <button onClick={this.handleClick.bind(this)}>ホームページに戻る</button>
      </div>
    ）
  }
  ハンドルクリック() {
    // コンソールログ(this.props.history)
    // this.props.history.go(-1)
    this.props.history.push('/home')
  }
}

const Home = () => <div>これはホームページです</div>

クラスAppはReact.Componentを拡張します。
  与える（） {
    戻る （
      <div>
        <h1>私はアプリコンポーネントです</h1>
        <div>
          <Link to="/home">ホーム</Link>
          <Link to="/product/1">製品 1</Link>
          <Link to="/product/2">製品 2</Link>
          <Link to="/product/3">製品 3</Link>
          <Link to="/product/4">製品 4</Link>
        </div>
        <ルート パス="/product/:id" コンポーネント={製品}></ルート>
        <ルート パス="/home" コンポーネント={Home}></ルート>
      </div>
    ）
  }
}
ReactDOM.render() は、
  <ルーター>
    <アプリ></アプリ>
  </ルーター>,
  ドキュメント.getElementById('ルート')
）