React構成サブルーティングの実装

React構成サブルーティングの実装

1. コンポーネント First.js にはサブコンポーネントがあります。

'./Admin' から Admin をインポートします
'./FormCom' から FormCom をインポートします。
'./One' から One をインポートします
'./ButtonCom' から ButtonCom をインポートします。
'./MenuCom' から MenuCom をインポートします
'./StepsCom' から StepsCom をインポートします。
'./TabsCom' から TabsCom をインポートします
'./TableCom' から TableCom をインポートします。
'./MessageCom' から MessageCom をインポートします。
'./NotificationCom' から NotificationCom をインポートします。
'./ProgressCom' から ProgressCom をインポートします。
'./SpinCom' から SpinCom をインポートします
'./BadgeCom' から BadgeCom をインポートします

First.js の完全なコードは次のとおりです。

'react' から React をインポートします
'antd' から { Layout, Menu } をインポートします。
'@ant-design/icons' から { UserOutlined、LaptopOutlined、NotificationOutlined } をインポートします。
'react-router-dom' から { HashRouter、Route、Link } をインポートします。
'./Admin' から Admin をインポートします
'./FormCom' から FormCom をインポートします。
'./One' から One をインポートします
'./ButtonCom' から ButtonCom をインポートします。
'./MenuCom' から MenuCom をインポートします
'./StepsCom' から StepsCom をインポートします。
'./TabsCom' から TabsCom をインポートします
'./TableCom' から TableCom をインポートします。
'./MessageCom' から MessageCom をインポートします。
'./NotificationCom' から NotificationCom をインポートします。
'./ProgressCom' から ProgressCom をインポートします。
'./SpinCom' から SpinCom をインポートします
'./BadgeCom' から BadgeCom をインポートします
const { サブメニュー } = メニュー;
const { ヘッダー、コンテンツ、サイド } = レイアウト;

デフォルトのクラスをエクスポートします。FirstはReact.Componentを拡張します。
    コンストラクタ() {
        素晴らしい();
    }

    //現在の親メニューのみを展開する
    rootSubmenuKeys = ['sub1', 'sub2', 'sub3'];

    状態 = {
        オープンキー: ['sub1'],
    };

    onOpenChange = openKeys => {
        const latestOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key) === -1);
        if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
            this.setState({ openKeys });
        } それ以外 {
            this.setState({
                openKeys: 最新のOpenKey ? [最新のOpenKey] : [],
            });
        }
    };
    //現在の親メニューのみを展開する end

    与える() {
        戻り値 (<div>
            <レイアウト>
                <ハッシュルーター>
                    <Header className="header" style={{ position: 'fixed', zIndex: 1, width: '100%', paddingLeft: '20px'}}>
                        <div className="logo" style={{fontSize: '32px', color: '#ffffff', fontWeight: 'bold'}}>React アプリ</div>
                        <メニュー theme="dark" mode="horizo​​ntal" defaultSelectedKeys={['1']}>
                            {/*<Menu.Item key="1">ナビゲーション 1</Menu.Item>
                            <Menu.Item key="2">ナビゲーション 2</Menu.Item>
                            <Menu.Item key="3">ナビゲーション 3</Menu.Item>*/
                        </メニュー>
                    </ヘッダー>
                    <レイアウト>
                        <Sider width={200} className="site-layout-background" style={{
                            オーバーフロー: 'auto'、
                            高さ: '100vh'、
                            位置: '固定'、
                            左: 0,
                        }}>
                            <メニュー
                                テーマ="ダーク"
                                モード="インライン"
                                デフォルト選択されたキー={['2']}
                                デフォルトオープンキー={['sub1']}
                                style={{ 高さ: '100%', パディング上部: '60px', 境界線右: 0 }}
                                onOpenChange={this.onOpenChange}
                                openKeys={this.state.openKeys}
                            >
                                <サブメニュー キー="sub1" アイコン={<UserOutlined />} タイトル="サブナビゲーション 1">
                                    <Menu.Item key="1"><Link to={`${this.props.match.path}/admin`}>admin</Link></Menu.Item>
                                    <Menu.Item key="2"><Link to={`${this.props.match.path}/form`}>フォーム</Link></Menu.Item>
                                    <Menu.Item key="3"><Link to={`${this.props.match.path}/one`}>1</Link></Menu.Item>
                                    <Menu.Item key="4"><Link to={`${this.props.match.path}/menu`}>メニュー</Link></Menu.Item>
                                </サブメニュー>
                                <SubMenu key="sub2" icon={<LaptopOutlined />} title="サブナビゲーション 2">
                                    <Menu.Item key="5"><Link to={`${this.props.match.path}/step`}>ステップ</Link></Menu.Item>
                                    <Menu.Item key="6"><Link to={`${this.props.match.path}/tabs`}>タブ</Link></Menu.Item>
                                    <Menu.Item key="7"><Link to={`${this.props.match.path}/table`}>テーブル</Link></Menu.Item>
                                    <Menu.Item key="8"><Link to={`${this.props.match.path}/message`}>メッセージ</Link></Menu.Item>
                                </サブメニュー>
                                <SubMenu key="sub3" icon={<NotificationOutlined />} title="サブナビゲーション 3">
                                    <Menu.Item key="9"><Link to={`${this.props.match.path}/notification`}>通知</Link></Menu.Item>
                                    <Menu.Item key="10"><Link to={`${this.props.match.path}/progress`}>ProgressCom</Link></Menu.Item>
                                    <Menu.Item key="11"><Link to={`${this.props.match.path}/spin`}>スピン</Link></Menu.Item>
                                    <Menu.Item key="12"><Link to={`${this.props.match.path}/badge`}>バッジ</Link></Menu.Item>
                                    <Menu.Item key="13"><Link to={`${this.props.match.path}/button`}>ボタン</Link></Menu.Item>
                                </サブメニュー>
                            </メニュー>
                        </サイド>
                        <レイアウト スタイル = {{ パディング: '84px 20px 20px', marginLeft: 200}}>
                            <コンテンツ
                                className="サイトレイアウトの背景"
                                スタイル={{
                                    パディング: 24,
                                    マージン: 0
                                }}
                            >
                                <ルート パス = {`${this.props.match.path}/admin`} 正確なコンポーネント = {Admin}></ルート>
                                <ルート パス = {`${this.props.match.path}/form`} コンポーネント = {FormCom}></ルート>
                                <ルート パス = {`${this.props.match.path}/one`} コンポーネント = {One}></ルート>
                                <ルート パス = {`${this.props.match.path}/menu`} コンポーネント = {MenuCom}></ルート>
                                <ルート パス = {`${this.props.match.path}/step`} コンポーネント = {StepsCom}></ルート>
                                <ルート パス = {`${this.props.match.path}/tabs`} コンポーネント = {TabsCom}></ルート>
                                <ルート パス = {`${this.props.match.path}/table`} コンポーネント = {TableCom}></ルート>
                                <ルート パス = {`${this.props.match.path}/message`} コンポーネント = {MessageCom}></ルート>
                                <ルート パス = {`${this.props.match.path}/notification`} コンポーネント = {NotificationCom}></ルート>
                                <ルート パス = {`${this.props.match.path}/progress`} コンポーネント = {ProgressCom}></ルート>
                                <ルート パス={`${this.props.match.path}/spin`} コンポーネント={SpinCom}></ルート>
                                <ルート パス = {`${this.props.match.path}/badge`} コンポーネント = {BadgeCom}></ルート>
                                <ルート パス = {`${this.props.match.path}/button`} コンポーネント = {ButtonCom}></ルート>
                            </コンテンツ>
                        </レイアウト>
                    </レイアウト>
                </ハッシュルーター>
            </レイアウト>
        </div>)
    }
}

${this.props.match.path}

が鍵です。

2. ログイン コンポーネント Login.js もあると仮定すると、コードは次のようになります。

'react' から React をインポートします
'antd' から Button をインポートします。

デフォルトのクラスLoginをエクスポートし、React.Componentを拡張します。
    コンストラクタ() {
        素晴らしい();
    }

    リダイレクトハンドル = () => {
        コンソールログ("aaa");
        this.props.history.push("/home");
    }

    与える() {
        return (<Button type="primary" onClick={()=>this.redirectHandle()}>プライマリボタン</Button>)
    }
}

React プロジェクトが React スキャフォールディングを使用してビルドされていると仮定して、src ディレクトリの App.js ファイルでルートを設定します。

  与える() {
    戻り値 (<HashRouter>
      <スイッチ>
        <Route exact={true} path="/login" component={Login} />
        <ルート パス="/home" コンポーネント={First} />
        <Redirect to='/login' /> {/*/login と /home 以外のルートは直接 /login にジャンプします*/}
      </スイッチ>
    </ハッシュルーター>)
  }

App.js の完全なコードは次のとおりです。

'react' から React をインポートします。
'antd' から { notification } をインポートします
'react-router-dom' から { HashRouter、Route、Switch、Redirect } をインポートします。
'./First' から First をインポートします。
'./Login' から Login をインポートします。
'./App.css' をインポートします。

クラスAppはReact.Componentを拡張します。
  コンストラクタ() {
    素晴らしい();
    this.openNotificationWithIcon = タイプ => {
      通知[タイプ]({
        メッセージ: '通知タイトル'、
        説明:
          「これが通知の内容です。これが通知の内容です。これが通知の内容です。」,
      });
    }
  }

  クリックハンドル() {
    console.log("クリックしました!!!");
  }

  与える() {
    戻り値 (<HashRouter>
      <スイッチ>
        <Route exact={true} path="/login" component={Login} />{/**exact は、入力 127.xx.xx.xx/home に /login ページが含まれるなどの、混在したルートを防止します*/
        <ルート パス="/home" コンポーネント={First} />
        <リダイレクト先='/login' />
      </スイッチ>
    </ハッシュルーター>)
  }
}

デフォルトのアプリをエクスポートします。

プロジェクトのディレクトリ構造は次のとおりです。

プロジェクトプレビューの効果は次のとおりです。

React 構成サブルートの実装に関するこの記事はこれで終わりです。React 構成サブルートの関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Nginx で React プロジェクトの URL を設定した後にルーティング パスを直接入力すると発生する 404 問題の解決方法
  • React-router v4 ルーティング設定方法の概要
  • 反応ルーティング設定の詳細な説明

<<:  Nginx の書き換え正規マッチング書き換え方法の例

>>:  Mysql の 2 つのテーブル間の結合クエリの 4 つの状況の概要

推薦する

入力のid属性とname属性の違いの例

長い間ウェブサイトを作ってきましたが、入力時のnameとidの違いがまだわかりません。最近jQuer...

事例を通してLinux NFSの仕組みを詳細に分析

前回の記事に引き続き、web02 サーバーを作成し、web01 サーバーと web02 サーバーの ...

MySQL は対応するクライアント プロセスにどのように接続しますか?

質問特定の MySQL 接続について、それがどのクライアント プロセスからのものであるかをどのように...

MySQL データベースの鉄則 (要約)

適切なデータベース仕様は、ソフトウェア実装の複雑さを軽減し、通信コストを削減するのに役立ちます。この...

国内SNSのホームページを比較・分析して得た経験をみんなで共有(写真)

この記事では、ソーシャル ウェブサイトのホームページを比較分析することで洞察を得て、ソーシャル ウェ...

Baidu デッドリンクファイルを作成する方法

Baidu によって定義されているデッドリンク形式には 2 種類あります。 1: XML形式のデッド...

Vue2.0でデータの双方向バインディング機能をjsを使って実装する

Object.definePropertyの理解文法:オブジェクト.defineProperty(o...

MySQL 5.7 以降のバージョンのダウンロードとインストールのグラフィック チュートリアル

1. ダウンロード1. MySQL公式サイトのダウンロードアドレス: https://downloa...

LeetCode の SQL 実装 (197. 気温上昇)

[LeetCode] 197.気温上昇Weather テーブルが指定されている場合、前の日付 (昨...

Docker イメージのローカル Elasticsearch ポート操作へのアクセス

dockerスタックによってデプロイされたイメージサービスを使用すると、イメージを入力した後、理論的...

Echarts は 1 つのグラフ内で異なる X 軸を切り替える機能を実装します (サンプル コード)

レンダリング下の画像のような効果を実現したい場合は、読み続けてアニメーション画像に直接進んでください...

フラッシュプラグインを使用してPCのカメラを呼び出し、TMLページに埋め込む方法

序文この記事を書いた主な理由は、チームリーダーが、ブラウザを使用してコンピューターのカメラを呼び出し...

MySQL sql_modeクエリと設定の詳細な説明

1. SQLを実行して表示する @@session.sql_mode を選択します。 グローバルレベ...

MySQL データベースを最適化する 8 つの方法の詳細な説明 (必読の定番)

導入:インターネット上にはデータベースの最適化に関する情報や方法が数多くありますが、その多くは品質に...

HTML チュートリアル: よく使われる HTML タグのコレクション (4)

関連記事:初心者が学ぶ HTML タグ (3)導入された HTML タグは、必ずしも XHTML 仕...