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 つの状況の概要
推薦する
Amoeba を使用して MySQL データベースの読み取り/書き込み分離を実装する方法の詳細な説明
MySQL には読み取りと書き込みを分離するアーキテクチャが多数あります。Baidu のそれらのほと...
HTML に画像が存在しない場合にデフォルトの画像を表示する方法の例
画像リンク <img src="" /> jsを使用してURLが有効...
Docker でコンテナのポート マッピングを動的に変更する方法
前書き: Docker のポート マッピングは、多くの場合、Docker Run コマンド中に -p...
CSS スタイルをプログラムで処理するためのサンプル コード
プログラム的アプローチの利点1. スタイルの分散を避けるためのグローバルコントロール2. シンプルな...
Linux で rpm パッケージを見つけるために CD をマウントする方法
前面に書かれたLinux を使用する際にソフトウェアをインストールする必要がある場合があります。もち...
CSS の Flex レイアウトを使用してシンプルな縦棒グラフを作成する方法
以下は、Flex レイアウトを使用した棒グラフです。 HTML: <div class=&qu...
MySQL パフォーマンス最適化のための魔法のツール、Explain の基本的な使用分析
導入MySQL には、SELECT ステートメントを分析し、開発者が最適化できるように SELECT...
Linux マルチスレッドにおけるフォークとミューテックス ロック プロセスの例
目次質問： 1. 最初の試み2. 合理的な分析3. 問題解決(1) pthread_join()の使...
Apache Flink の任意の Jar パッケージのアップロードにより、リモート コード実行の脆弱性が再発する問題が発生する (脆弱性警告)
脆弱性の説明Apache Flink は、分散ストリームおよびバッチ データ処理用のオープン ソース...
MySQL RouterはMySQLの読み取りと書き込みの分離を実装します
目次1. はじめに2. MySQLルーターを構成する2.1 MySQLルーターのインストール2.2 ...
IDEA を使用して Web プロジェクトを作成し、Tomcat に公開する方法
目次ウェブ開発1. Web開発の概要Tomcatのインストールと設定Tomcatをインストールする2...
略語マークと頭字語マーク
<abbr>タグと<acronym>タグは、Web ページに表示される略語と...
jQueryはマウスドラッグ画像機能を実装します
この例では、jQuery を使用してマウス ドラッグ イメージ機能を実装します。まず、ラッパーを設定...
Vue の計算プロパティの詳細な説明
目次補間式方法計算された要約する今日は、Vue の計算プロパティについてお話ししましょう。計算プロパ...