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' />
      </スイッチ>
    </ハッシュルーター>)
  }
}

デフォルトのアプリをエクスポートします。

プロジェクトのディレクトリ構造は次のとおりです。