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 つの状況の概要
長い間ウェブサイトを作ってきましたが、入力時のnameとidの違いがまだわかりません。最近jQuer...
前回の記事に引き続き、web02 サーバーを作成し、web01 サーバーと web02 サーバーの ...
質問特定の MySQL 接続について、それがどのクライアント プロセスからのものであるかをどのように...
適切なデータベース仕様は、ソフトウェア実装の複雑さを軽減し、通信コストを削減するのに役立ちます。この...
この記事では、ソーシャル ウェブサイトのホームページを比較分析することで洞察を得て、ソーシャル ウェ...
Baidu によって定義されているデッドリンク形式には 2 種類あります。 1: XML形式のデッド...
Object.definePropertyの理解文法:オブジェクト.defineProperty(o...
1. ダウンロード1. MySQL公式サイトのダウンロードアドレス: https://downloa...
[LeetCode] 197.気温上昇Weather テーブルが指定されている場合、前の日付 (昨...
dockerスタックによってデプロイされたイメージサービスを使用すると、イメージを入力した後、理論的...
レンダリング下の画像のような効果を実現したい場合は、読み続けてアニメーション画像に直接進んでください...
序文この記事を書いた主な理由は、チームリーダーが、ブラウザを使用してコンピューターのカメラを呼び出し...
1. SQLを実行して表示する @@session.sql_mode を選択します。 グローバルレベ...
導入:インターネット上にはデータベースの最適化に関する情報や方法が数多くありますが、その多くは品質に...
関連記事:初心者が学ぶ HTML タグ (3)導入された HTML タグは、必ずしも XHTML 仕...