All files / src/tabs/_example TabsWithRouterExample.jsx

85.71% Statements 6/7
50% Branches 2/4
80% Functions 4/5
85.71% Lines 6/7

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              1x               1x         1x 1x         5x       5x                            
import React from "react";
import { Tabs, TabPanel } from "@tencent/tea-component/lib/tabs";
 
// eslint-disable-next-line import/no-extraneous-dependencies
import { HashRouter, Route, Link } from "react-router-dom";
 
export default function TabsWithRouterExample() {
  const tabs = [
    { id: "basic", label: "基本信息" },
    { id: "network", label: "弹性网卡" },
    { id: "monitor", label: "监控信息" },
    { id: "sg", label: "安全组" },
    { id: "oplog", label: "操作日志" },
  ];
 
  return (
    <HashRouter>
      <Route path="/:tab">
        {({ match }) => {
          const activeId =
            (match && match.params && match.params.tab) || "basic";
          return (
            <Tabs
              tabs={tabs}
              activeId={activeId}
              tabBarRender={(children, tab) => (
                <Link to={`/${tab.id}`}>{children}</Link>
              )}
            >
              {tabs.map(tab => (
                <TabPanel key={tab.id} id={tab.id}>
                  <Route
                    path={`/${tab.id}`}
                    render={() => <div>已路由到:{tab.label}</div>}
                  />
                </TabPanel>
              ))}
            </Tabs>
          );
        }}
      </Route>
    </HashRouter>
  );
}