PageLayout.tsx
2.68 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
import React, { FC, useEffect, useState } from 'react';
import { Layout, Menu } from 'antd';
import {
Link,
Switch,
withRouter,
RouteComponentProps,
Route,
useLocation,
useHistory,
} from 'react-router-dom';
import routes from '../router';
import './PageLayout.less';
const { Item } = Menu;
const { Header, Content, Sider } = Layout;
interface MenuItem {
name: string
key: string
path: string
}
interface PageLayoutProp {}
const PageLayout:FC<PageLayoutProp & RouteComponentProps> = () => {
const history = useHistory()
const { pathname } = useLocation()
const [selectedKeys, setSelectedKeys] = useState<string[]>([])
const onMenuClick = (menu: MenuItem) => {
console.log(menu)
if (menu.path === pathname) return
const { key, path } = menu
setSelectedKeys([key])
history.replace(path)
}
useEffect(() => {
const findKey = (path: string): any => routes.find(item => item.children ? findKey(path) : path === item.path)
const filterRouteKey = findKey(pathname);
if (filterRouteKey) {
setSelectedKeys(filterRouteKey.key)
history.replace(filterRouteKey.path)
} else {
setSelectedKeys(['SystemSetting'])
history.replace('/system-setting')
}
}, [history, pathname])
return (
<Layout>
<Header className="header">
<div className="logo" />
</Header>
<Layout>
<Sider width={200} className="site-layout-background">
<Menu
mode="inline"
selectedKeys={selectedKeys}
style={{ height: '100%', borderRight: 0 }}
>
{routes.map(route => (
<Item key={route.key} onClick={ () => onMenuClick(route) }>
<Link to={route.path}>
<span>{route.name}</span>
</Link>
</Item>
))}
</Menu>
</Sider>
<Layout style={{ padding: '24px 24px' }}>
{/* <Breadcrumb style={{ margin: '16px 0' }}>
<Breadcrumb.Item>Home</Breadcrumb.Item>
<Breadcrumb.Item>List</Breadcrumb.Item>
<Breadcrumb.Item>App</Breadcrumb.Item>
</Breadcrumb> */}
<Content
className="site-layout-background"
style={{
padding: 24,
margin: 0,
minHeight: 280,
}}
>
<Switch>
{routes.map(route => (
<Route
key={route.key}
path={route.path}
component={route.component}
/>
))}
</Switch>
</Content>
</Layout>
</Layout>
</Layout>
)
}
export default withRouter(PageLayout);