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 つの状況の概要
推薦する
HTML テーブルタグチュートリアル (11): 水平方向の配置属性 ALIGN
水平方向では、テーブルの配置を左、中央、右に設定できます。基本的な構文<テーブル配置=&quo...
Mysqlトランザクション操作の失敗を解決する方法
Mysqlトランザクション操作の失敗を解決する方法トランザクションの原子性: トランザクションは、デ...
Linux で FastDFS ファイル サーバーを構築するための実装手順
目次1. ソフトウェアパッケージ2. gccをインストールする3. libfastcommonをイン...
HTML Selectは、デフォルトの選択を設定するためにselected属性を使用します。
オプションに属性 selected = "selected" を追加すると、それ...
Windows で Mysql を起動したときに 1067 が表示される場合の解決策
数日前に仕事を始めて、Mysql をインストールしたところ、開くことができました。今日、会社に行った...
Nginx+Apache の動的および静的分離の導入の詳細な例
Nginx の動的および静的分離の概要Nginx は静的処理能力が強力ですが、動的処理能力が不十分で...
CSS3 フィルター属性の使い方の紹介
1. はじめにフロントエンドページのアニメーション効果を記述する場合、filter 属性は多かれ少な...
Django がローカル MySQL データベースに接続する手順 (pycharm)
ステップ1:setting.pyでデータベースを変更する # データベースを構成する DATABAS...
Linuxでkv設定ファイルを変更するにはsedコマンドを使用します
sed は Unix の文字ストリーム エディタ、つまりストリーム エディタです。行指向であり、行単...
Docker で Nginx イメージ サーバーを構築する方法
序文一般的な開発では、画像をディレクトリにアップロードし、ディレクトリとファイル名を連結してデータベ...
MySQLクエリデータを時間別に表示します。データがない場合は0を入力してください。
需要背景統計インターフェースでは、フロントエンドは 2 つの配列を返す必要があります。1 つは 0 ...
JavaScriptはスライダーを介してWebページの色を変更することを実装します
みなさんこんにちは、今日はウェブフロントエンドのHTMLを見ていたら、inputタグのtype属性が...
簡潔なReactコンポーネントを書くためのヒント
目次スプレッド演算子を使用してプロパティを渡すのは避けてください関数パラメータをオブジェクトにカプセ...
MySQLテーブルシャーディングとパーティショニングの具体的な実装方法
縦型テーブル垂直テーブル分割とは、多数の列を持つテーブルを複数のテーブルに分割することを意味します。...
ウェブデザインにおけるテキスト入力ボックスのパラメータの説明
<br />一般的なゲストブック、フォーラムなどでは、テキスト入力ボックスが使われていま...