All files / src/menu/_example MenuWithRouterExample.jsx

81.82% Statements 9/11
50% Branches 2/4
85.71% Functions 6/7
81.82% Lines 9/11

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>
  );
}