reactjs - MUI 导航选项卡不适用于 react-router
问题描述
以下是四个组成部分:
应用程序.js:
import React from 'react';
import { Route, Switch } from 'react-router-dom';
import About from './About';
import Home from './Home';
const App = () => {
return <Switch>
<Route path="/about">
<About />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
}
export default App;
导航.js:
import * as React from 'react';
import {Box,Tabs,Tab} from '@material-ui/core';
function LinkTab(props) {
return (
<Tab
component="a"
onClick={(event) => {
event.preventDefault();
}}
{...props}
/>
);
}
export default function NavTabs() {
const [value, setValue] = React.useState(0);
const handleChange = (event, newValue) => {
setValue(newValue);
};
return (
<Box sx={{ width: '100%' }}>
<Tabs value={value} onChange={handleChange} aria-label="nav tabs example">
<LinkTab label="Home" href="/" />
<LinkTab label="About" href="/about" />
</Tabs>
</Box>
);
}
关于.js:
import React from 'react'
import NavTabs from './Nav'
export default function About() {
return (
<div>
<NavTabs/>
About
</div>
)
}
主页.js:
import React from 'react'
import NavTabs from './Nav'
export default function Home() {
return (
<div>
<NavTabs/>
Home
</div>
)
}
在 Nav.js 中,当我想切换选项卡时,它不会切换到另一个选项卡。URL 链接也不会更新。它始终是第一个链接。
在这里,我希望当我切换选项卡时,它也会更改组件和地址 URL。我怎样才能做到这一点?
解决方案
element的href
属性a
使整个页面刷新,这违背了 react-router 的目的。在 react-router 中,您应该使用Link
组件并提供to
prop 来告诉 react-router 在不更改应用程序状态的情况下导航到不同的路由:
// <a href='/about' {...} />
<Link to='/about' {...} />
您可以通过将根组件替换为Tab
withLink
而不是来修复它,并将to属性a
更改为:href
to
// <Tab component='a' label="Home" href="/" />
<Tab component={Link} label="Home" to="/" />
推荐阅读
- c# - C# 试图通过解析混淆数字
- python - 数组的分割部分
- ios - 带有 UISegmentedControl 和 childViewController 的 iOS LargeTitle(在容器中)
- java - 如何在 Jersey/Dropwizard 中获取变量列表 JSON 正文?
- mysql - 在mysql中创建过程时出现语法错误
- c - 通过自定义排序/删除链表中的重复项跳过最后一项
- python - 在 Python 中重塑数据集
- javascript - Slick Slider - 将图像加载到幻灯片中的 API
- python - 如果一个元组是另一个元组的子集,如何有效地查找
- vb.net - 使用 VB.net 中的 Google Cloud 服务向 Google Drive 上传/下载文件