Press n or j to go to the next uncovered block, b, p or k for the previous block.
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 | 1x 1x 1x 1x 1x 1x 1x 1x 1x | import React from "react"; import { Layout } from "@tencent/tea-component/lib/layout"; import { Card } from "@tencent/tea-component/lib/card"; import { Menu } from "@tencent/tea-component/lib/menu"; // eslint-disable-next-line import/no-extraneous-dependencies import { HashRouter, Route, Link, Switch, withRouter } from "react-router-dom"; const { Body, Sider, Content: LayoutContent } = Layout; const MenuWithRouter = withRouter(function MenuWithRouter({ location }) { const pathname = location && location.pathname; return ( <Menu theme="dark" title="产品名称"> <Menu.Item title="一级菜单 - foo" selected={pathname.startsWith("/foo")} render={children => <Link to="/foo">{children}</Link>} /> <Menu.SubMenu defaultOpened title="一级菜单"> <Menu.Item title="二级菜单 - bar" selected={pathname.startsWith("/bar")} render={children => <Link to="/bar">{children}</Link>} /> <Menu.Item title="二级菜单 - baz" selected={pathname.startsWith("/baz")} render={children => <Link to="/baz">{children}</Link>} /> </Menu.SubMenu> </Menu> ); }); function Content({ match }) { const path = match && match.path; return ( <LayoutContent> <LayoutContent.Header title={path} /> <LayoutContent.Body> <Card> <Card.Body>{path}</Card.Body> </Card> </LayoutContent.Body> </LayoutContent> ); } function MenuWithRouterExample() { return ( <HashRouter> <Layout> <Body> <Sider> <MenuWithRouter /> </Sider> <Switch> <Route path="/foo" component={Content} /> <Route path="/bar" component={Content} /> <Route path="/baz" component={Content} /> </Switch> </Body> </Layout> </HashRouter> ); } export default function Demo() { return ( <section style={{ height: 500, border: "1px solid #ddd", }} > <MenuWithRouterExample /> </section> ); } |