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 つの状況の概要
推薦する
vue の webpack -v エラー解決の概要
XiaobaiはVueについて学び、次にwebpackについて学び、そしてさまざまなものをインストー...
Node.js組み込みモジュールの詳細な説明
目次概要1. パスモジュール2. モジュールまで3. fsモジュール4. イベントモジュール5. h...
Linux システムの仮想ホストで Swoole Loader 拡張機能を有効にする方法
特記事項: Swoole 拡張機能のみがインストールされ、サーバーはホストにインストールされません。...
Maven プロジェクトのリモート デプロイメント && Tomcat を使用してデータベース接続を構成する方法
1つ。 tomcat を使用したリモート展開1.1 発生した問題:プロジェクトでは、サードパーティの...
WeChat アプレットのカスタム スクロール ビューのサンプル コード
ミニプログラムカスタムスクロールビュースクロールバーさっそくレンダリングを見てみましょうレンダリング...
Docker を使用して Django プロジェクトをデプロイする方法の例
また、Dockerを使用してDjangoプロジェクトをデプロイするのも非常に簡単です。とても良いです...
Javascriptで戦略パターンを実装する方法
目次概要コードの実装要約する概要戦略パターンは、JavaScript デザイン パターンにおける動作...
CSS を使用して画像の下の空白を数ピクセル消去する方法の詳細な説明
最近、友人が私に質問をしました。ページをレイアウトすると、画像の下に 1 ～ 2 ピクセルの空白があ...
CSS でコンテンツが長すぎる問題を解決する方法の詳細な説明
CSS を記述するときに、デザインに存在する重要なケースを忘れてしまうことがあります。たとえば、コン...
momentJs を使用してカウントダウン コンポーネントを作成する (サンプル コード)
今日はvueとmomentで作ったカウントダウンを紹介したいと思います。具体的な内容は以下のとおりで...
Javascript サンプル プロジェクトでの虫眼鏡効果の実装プロセス
目次序文事例: JD.com の虫眼鏡効果の模倣オフセットシリーズクライアントシリーズスクロールシリ...
スーパーバイザーによるDockerfileのマルチサービスイメージパッケージ操作
Dockerfileの作成yumソースを設定する cd /tmp/docker vim Docker...
小さなアイコンのフロントエンド処理ソリューションのグラフィカルな説明
序文この記事を始める前に、複数選択の質問をしてみましょう。フロントエンド開発でビルド ツールを使用す...
Linux (Centos7) に mysql8.0.18 をインストールするチュートリアル図
1 インストールリソースパッケージmysql-8.0.18-1.el7.x86_64.rpm-bun...
MySQL バッチ SQL 挿入パフォーマンス最適化の詳細な説明
大量のデータを扱うシステムの中には、クエリ効率の低さやデータの保存時間の長さといったデータベースの問...