ccic-web/packages/examination/src/App.tsx

import React from 'react'
import {Layout, Breadcrumb, Select} from 'antd';
import Header from 'views/header';
import Slider from 'views/slider';
import ContentMain from 'components/contentMain';

import { withRouter } from 'react-router-dom'
import {findTitleByKey} from "./views/slider";

const { Content, Footer, Sider } = Layout;

class App extends React.Component {

    state = {
        collapsed: false,
        breadcrumb: []
    };

    onCollapse = (collapsed: boolean) => {
        this.setState({ collapsed });
    };

    changeCollapse (value: boolean) {
        this.setState({collapsed: value})
    }

    componentDidMount() {
        // @ts-ignore
        this.props.history.listen(path=>{
            console.log("全局路由监听" + path.pathname)
            var tag = findTitleByKey(path.pathname.slice(1));
            console.log(tag)
            if (tag && tag.length > 0) {
                this.setState({ breadcrumb: tag });
            }
        })
    }

    render() {
        const { collapsed, breadcrumb } = this.state;
        return (
            <Layout style={{ minHeight: '100vh' }}>
                <Sider theme={'light'} style={{ background: '#fff' }} trigger={null} collapsible collapsed={collapsed} onCollapse={this.onCollapse}>
                    <Slider collapsed={collapsed} />
                </Sider>
                <Layout className="site-layout">
                    <Header changeCollapse={this.changeCollapse.bind(this)} />
                    <Content className={collapsed === true ? 'noLeft' : 'left'} style={{ position: 'absolute', top: 70, right: 0, bottom: 0 }}>
                        <Breadcrumb style={{ margin: '0 16px' }}>
                            {breadcrumb.map((item, index) => (
                                <Breadcrumb.Item key={index}>{item}</Breadcrumb.Item>
                            ))}
                        </Breadcrumb>
                        <ContentMain />
                    </Content>
                    <Footer className={collapsed === true ? 'noLeft footer' : 'left footer'} style={{ position: 'absolute', right: 0, bottom: 0 }}></Footer>
                </Layout>
            </Layout>
        )
    }
}

// @ts-ignore
export default withRouter(App);