以下是四个组成部分:
App.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;
Nav.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>
);
}
About.js:
import React from 'react'
import NavTabs from './Nav'
export default function About() {
return (
<div>
<NavTabs/>
About
</div>
)
}
Home.js:
import React from 'react'
import NavTabs from './Nav'
export default function Home() {
return (
<div>
<NavTabs/>
Home
</div>
)
}
在Nav.js中,当我想切换标签时,它不会切换到另一个标签。URL链接也不会更新。它始终是第一个链接。
在这里,我希望,当我切换选项卡,然后它也改变了组件和地址的URL。我该怎么做?
1条答案
按热度按时间rur96b6h1#
a
元素中的href
属性会刷新整个页面,这违背了react-router的目的。在react-router中,您应该使用Link
组件并提供to
prop来告诉react-router导航到不同的路由而不更改应用程序状态:您可以通过将
Tab
的根组件替换为Link
而不是a
来修复它,并将href
更改为to
属性: