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