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="horizontal" 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 の書き換え正規マッチング書き換え方法の例
>>: Mysql の 2 つのテーブル間の結合クエリの 4 つの状況の概要
推薦する
三角形を描画するための CSS 実装コード (border メソッド)
1. 単純な三角形を実装するCSS ボックス モデルの境界線を使用すると、次のような三角形を実現で...
Mysql インデックスと Redis ジャンプテーブルについての簡単な説明
まとめインタビュー中、MySQL インデックスの問題について議論しているときに、B+ ツリー、B ツ...
jsの継承の6つの方法を詳しく解説
プロトタイプチェーン継承プロトタイプ継承は、ECMAScript における主な継承方法です。基本的な...
優れたユーザー エクスペリエンス デザイナーが行うべき 5 つのこと (画像とテキスト)
この記事は、@C7210 によって翻訳されたブログ「Usability Counts」からの翻訳です...
Centos に MYSQL8.X をインストールするチュートリアル
MySQLのインストール（4、5、6は省略可能）ステートメント: CentOS のバージョンは 7....
Vue は Echarts をインポートして折れ線グラフを実現します
この記事では、VueでEchartsをインポートして線散布図を実現する具体的なコードを参考までに共有...
Vueはページキャッシュ機能を実装する
この記事の例では、ページキャッシュ機能を実装するためのVueの具体的なコードを参考までに共有していま...
Vue+EChartsは、中国の地図の描画と省の自動回転と強調表示を実現します。
目次成果を達成する完全なコード + 詳細なコメントまとめ成果を達成する完全なコード + 詳細なコメン...
MySQL パーティションテーブルのベストプラクティスガイド
序文：パーティショニングはテーブル設計パターンです。一般的に、テーブル パーティショニングとは、条件...
Linux ディスク領域解放問題の概要
IDC のサーバーの /partition 使用率がいっぱいです。 100% に到達しました!確認し...
ウェブサイト制作におけるオンライン広告の新しいインタラクティブ体験（グラフィックチュートリアル）
インターネット時代が成熟するにつれて、オンライン広告の発展も加速しています。圧倒的な広告収入と完璧な...
Dockerfileの指示と基本構造の説明
Dockerfile を使用すると、ユーザーはカスタム イメージを作成できます。基本構造Docker...
MySQL で削除されたレコードが有効にならない理由のトラブルシューティング
オンライン MySQL トランザクションの問題の記録先週の金曜日、大きなテーブルを削除する操作を実行...
HTMLにリンクを挿入する方法
各 Web ページには、URL () で識別されるアドレスがあります。通常、Web サイト内でリンク...
LinuxにKafkaをインストールする
目次1.1 前提条件としてのJava環境1.2 Zookeeperのインストールと設定1.3 Kaf...