reactjs - Material UI React 表挂在切换选项卡上
问题描述
我使用对这些组件做出反应来创建 SPA:BrowserRouter、Route、Link、AppBar、Toolbar、Tabs、Tab、MaterialTable。
一切正常,除了当我在选项卡之间快速切换(单击 PAGE1、PAGE2 链接)时,浏览器挂起。这发生在 Chrome 和 Firefox 中。我没有使用任何状态或钩子。
密码箱链接: https ://codesandbox.io/s/winter-pond-1zsn3 ?file=/public/index.html
应用程序.js:
import React from "react";
import "./styles.css";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Page1 from "./Page1";
import Page2 from "./Page2";
import Header from "./Header";
export default function App() {
return (
<BrowserRouter>
<Header />
<Switch>
<Route exact path="/Page1" component={Page1}></Route>
<Route exact path="/Page2" component={Page2}></Route>
</Switch>
</BrowserRouter>
);
}
页眉.jsx
import React from "react";
import { Link } from "react-router-dom";
import { AppBar, Toolbar, Tabs, Tab } from "@material-ui/core";
const Header = () => {
return (
<AppBar position="static">
<Toolbar>
<Tabs>
<Tab label="Page1" to="/Page1" component={Link} />
<Tab label="Page2" to="/Page2" component={Link} />
</Tabs>
</Toolbar>
</AppBar>
);
};
export default Header;
Page1.jsx
import React from "react";
const Page1 = () => {
return <div>Page1</div>;
};
export default Page1;
Page2.jsx
import React from "react";
import MaterialTable from "material-table";
const taskColumns = [
{ title: "Task Name", field: "TaskName" },
{ title: "Task Description", field: "TaskDesc" }
];
const Page2 = () => {
return <MaterialTable title="Task List" columns={taskColumns} data={[]} />;
};
export default Page2;
解决方案
推荐阅读
- javascript - Android WebClient 中的 AJAX 重定向
- python - 如何使用固定精度和语言环境类型小数分隔符使字符串格式浮动?
- go - 如何去:从多个包生成纵梁常量?
- javascript - 按字段值从平面对象数组创建层次树
- c# - 如何在 JsonReaderException 之后存储 json 字符串?
- keycloak - 我想要自定义 Keyclock 身份验证/授权或身份提供者
- angular - 如何为 ngx-intl-tel-input 设置初始值
- r - “sentimentr”包如何将一个段落或句子分成1个以上的句子?
- javascript - 如何在日期选择器中显示当前日期
- rust - 是否可以判断一个字段是某种类型还是在过程宏中实现某种方法?