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 つの状況の概要
水平方向では、テーブルの配置を左、中央、右に設定できます。基本的な構文<テーブル配置=&quo...
Mysqlトランザクション操作の失敗を解決する方法トランザクションの原子性: トランザクションは、デ...
目次1. ソフトウェアパッケージ2. gccをインストールする3. libfastcommonをイン...
オプションに属性 selected = "selected" を追加すると、それ...
数日前に仕事を始めて、Mysql をインストールしたところ、開くことができました。今日、会社に行った...
Nginx の動的および静的分離の概要Nginx は静的処理能力が強力ですが、動的処理能力が不十分で...
1. はじめにフロントエンドページのアニメーション効果を記述する場合、filter 属性は多かれ少な...
ステップ1:setting.pyでデータベースを変更する # データベースを構成する DATABAS...
sed は Unix の文字ストリーム エディタ、つまりストリーム エディタです。行指向であり、行単...
序文一般的な開発では、画像をディレクトリにアップロードし、ディレクトリとファイル名を連結してデータベ...
需要背景統計インターフェースでは、フロントエンドは 2 つの配列を返す必要があります。1 つは 0 ...
みなさんこんにちは、今日はウェブフロントエンドのHTMLを見ていたら、inputタグのtype属性が...
目次スプレッド演算子を使用してプロパティを渡すのは避けてください関数パラメータをオブジェクトにカプセ...
縦型テーブル垂直テーブル分割とは、多数の列を持つテーブルを複数のテーブルに分割することを意味します。...
<br />一般的なゲストブック、フォーラムなどでは、テキスト入力ボックスが使われていま...