Implementierung des React-Konfigurations-Subroutings

Admin aus './Admin' importieren
FormCom aus „./FormCom“ importieren
importiere One aus './One'
ButtonCom aus „./ButtonCom“ importieren
importiere MenuCom aus './MenuCom'
importiere StepsCom aus './StepsCom'
importiere TabsCom aus './TabsCom'
importiere TableCom aus './TableCom'
importiere MessageCom aus './MessageCom'
importiere NotificationCom aus './NotificationCom'
importiere ProgressCom aus „./ProgressCom“
Importieren Sie SpinCom aus „./SpinCom“.
BadgeCom aus „./BadgeCom“ importieren

React von „react“ importieren
importiere { Layout, Menü } von „antd“;
importiere { UserOutlined, LaptopOutlined, NotificationOutlined } aus '@ant-design/icons';
importiere { HashRouter, Route, Link } von 'react-router-dom'
Admin aus './Admin' importieren
FormCom aus „./FormCom“ importieren
importiere One aus './One'
ButtonCom aus „./ButtonCom“ importieren
importiere MenuCom aus './MenuCom'
importiere StepsCom aus './StepsCom'
importiere TabsCom aus './TabsCom'
importiere TableCom aus './TableCom'
importiere MessageCom aus './MessageCom'
importiere NotificationCom aus './NotificationCom'
importiere ProgressCom aus „./ProgressCom“
Importieren Sie SpinCom aus „./SpinCom“.
BadgeCom aus „./BadgeCom“ importieren
const { Untermenü } = Menü;
const { Header, Inhalt, Seiten } = Layout;

exportiere Standardklasse First erweitert React.Component {
    Konstruktor() {
        super();
    }

    //Nur das aktuelle übergeordnete Menü erweitern begin
    rootSubmenüSchlüssel = ['sub1', 'sub2', 'sub3'];

    Zustand = {
        openKeys: ['sub1'],
    };

    beiÖffnenÄnderung = Schlüssel öffnen => {
        const latestOpenKey = openKeys.find(Schlüssel => this.state.openKeys.indexOf(Schlüssel) === -1);
        wenn (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
            this.setState({ openKeys });
        } anders {
            dies.setState({
                openKeys: letzterOffenerSchlüssel ? [letzterOffenerSchlüssel] : [],
            });
        }
    };
    //Nur das aktuelle übergeordnete Menü erweitern Ende

    rendern() {
        zurück (<div>
            <Layout>
                <HashRouter>
                    <Header-Klassenname="Header"-Stil = {{ Position: 'fest', zIndex: 1, Breite: '100 %', Polsterung links: '20px'}}>
                        <div className="logo" style={{fontSize: '32px', color: '#ffffff', fontWeight: 'bold'}}>React-App</div>
                        <Menüthema="dunkel" Modus="horizontal" defaultSelectedKeys={['1']}>
                            {/*<Menu.Item key="1">Navigation 1</Menu.Item>
                            <Menu.Item key="2">Navigation 2</Menu.Item>
                            <Menu.Item key="3">Navigation 3</Menu.Item>*/}
                        </Menü>
                    </Header>
                    <Layout>
                        <Seitenbreite={200} Klassenname="site-layout-background" Stil={{
                            Überlauf: „auto“,
                            Höhe: '100vh',
                            Position: 'fest',
                            links: 0,
                        }}>
                            <Menü
                                Thema="dunkel"
                                Modus="inline"
                                Standardmäßig ausgewählte Schlüssel = {['2']}
                                Standard-OpenKeys = {['sub1']}
                                Stil = {{ Höhe: '100 %', Polsterung oben: '60px', Rahmen rechts: 0 }}
                                beiOpenChange={this.onOpenChange}
                                openKeys={dieser.Zustand.openKeys}
                            >
                                <SubMenu key="sub1" icon={<UserOutlined />} title="subnav 1">
                                    <Menu.Item key="1"><Link zu={`${this.props.match.path}/admin`}>Administrator</Link></Menu.Item>
                                    <Menu.Item key="2"><Link to={`${this.props.match.path}/form`}>Formular</Link></Menu.Item>
                                    <Menu.Item key="3"><Link to={`${this.props.match.path}/one`}>Eins</Link></Menu.Item>
                                    <Menu.Item key="4"><Link to={`${this.props.match.path}/menu`}>Menü</Link></Menu.Item>
                                </Untermenü>
                                <SubMenu key="sub2" icon={<LaptopOutlined />} title="subnav 2">
                                    <Menu.Item key="5"><Link to={`${this.props.match.path}/step`}>Schritt</Link></Menu.Item>
                                    <Menu.Item key="6"><Link to={`${this.props.match.path}/tabs`}>Registerkarten</Link></Menu.Item>
                                    <Menu.Item key="7"><Link to={`${this.props.match.path}/table`}>Tabelle</Link></Menu.Item>
                                    <Menu.Item key="8"><Link to={`${this.props.match.path}/message`}>Nachricht</Link></Menu.Item>
                                </Untermenü>
                                <SubMenu key="sub3" icon={<NotificationOutlined />} title="subnav 3">
                                    <Menu.Item key="9"><Link to={`${this.props.match.path}/notification`}>Benachrichtigung</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`}>Drehen</Link></Menu.Item>
                                    <Menu.Item key="12"><Link to={`${this.props.match.path}/badge`}>Abzeichen</Link></Menu.Item>
                                    <Menu.Item key="13"><Link to={`${this.props.match.path}/button`}>Schaltfläche</Link></Menu.Item>
                                </Untermenü>
                            </Menü>
                        </Sider>
                        <Layoutstil={{ padding: '84px 20px 20px', marginLeft: 200}}>
                            <Inhalt
                                Klassenname = "Site-Layout-Hintergrund"
                                Stil={{
                                    Polsterung: 24,
                                    Marge: 0
                                }}
                            >
                                <Routenpfad={`${this.props.match.path}/admin`} genaue Komponente={Admin}></Route>
                                <Routenpfad={`${this.props.match.path}/form`} Komponente={FormCom}></Route>
                                <Routenpfad={`${this.props.match.path}/one`} Komponente={One}></Route>
                                <Routenpfad={`${this.props.match.path}/menu`} Komponente={MenuCom}></Route>
                                <Routenpfad={`${this.props.match.path}/step`} Komponente={StepsCom}></Route>
                                <Routenpfad={`${this.props.match.path}/tabs`} Komponente={TabsCom}></Route>
                                <Routenpfad={`${this.props.match.path}/table`} Komponente={TableCom}></Route>
                                <Routenpfad={`${this.props.match.path}/message`} Komponente={MessageCom}></Route>
                                <Routenpfad={`${this.props.match.path}/notification`} Komponente={NotificationCom}></Route>
                                <Routenpfad={`${this.props.match.path}/progress`} Komponente={ProgressCom}></Route>
                                <Routenpfad={`${this.props.match.path}/spin`} Komponente={SpinCom}></Route>
                                <Routenpfad={`${this.props.match.path}/badge`} Komponente={BadgeCom}></Route>
                                <Routenpfad={`${this.props.match.path}/button`} Komponente={ButtonCom}></Route>
                            </Inhalt>
                        </Layout>
                    </Layout>
                </HashRouter>
            </Layout>
        </div>)
    }
}

${this.props.match.path}

React von „react“ importieren
importiere { Button } von 'antd';

exportiere Standardklasse Login erweitert React.Component {
    Konstruktor() {
        super();
    }

    Umleitungshandle = () => {
        Konsole.log("aaa");
        diese.props.history.push("/home");
    }

    rendern() {
        return (<Button type="primary" onClick={()=>this.redirectHandle()}>Primärer Button</Button>)
    }
}

  rendern() {
    return (<HashRouter>
      <Schalter>
        <Route exact={true} path="/login" component={Login} />
        <Routenpfad="/home" Komponente={Erste} />
        <Redirect to='/login' /> {Andere Routen als /*/login und /home springen direkt zu /login*/}
      </Schalter>
    </HashRouter>)
  }

importiere React von „react“;
importiere {Benachrichtigung} von 'antd'
importiere { HashRouter, Route, Switch, Redirect } von „react-router-dom“;
importiere First aus „./First“;
Login aus „./Login“ importieren;
importiere './App.css';

Klasse App erweitert React.Component {
  Konstruktor() {
    super();
    this.openNotificationWithIcon = Typ => {
      Benachrichtigung[Typ]({
        Nachricht: 'Benachrichtigungstitel',
        Beschreibung:
          'Dies ist der Inhalt der Benachrichtigung. Dies ist der Inhalt der Benachrichtigung. Dies ist der Inhalt der Benachrichtigung.',
      });
    }
  }

  KlickHandle() {
    console.log("geklickt!!!");
  }

  rendern() {
    return (<HashRouter>
      <Schalter>
        <Route exact={true} path="/login" component={Login} /> {/**exact verhindert gemischte Routen, wie zum Beispiel: input 127.xx.xx.xx/home enthält die /login-Seite*/}
        <Routenpfad="/home" Komponente={Erste} />
        <Weiterleitung zu='/login' />
      </Schalter>
    </HashRouter>)
  }
}

Standard-App exportieren;