[英]Using @Material-UI Tabs as Navbar
fairly new to the coding space. 相当新的编码空间。 I have tried looking everywhere for the answer to this question, and while I've found many answers, none of them work for me.
我试着到处寻找这个问题的答案,虽然我找到了很多答案,但它们都不适合我。
My problem is that I would like to use @Material-UI tab components as a NavBar, and I can only seem to either 1. turn the tabs into static links that work but have no animation or indicator, or 2. keep the animations but have no functionality as far as changing the page goes. 我的问题是我想使用@ Material-UI选项卡组件作为NavBar,我似乎只能1.将标签转换为可以工作但没有动画或指示的静态链接,或者2.保留动画但是在改变页面方面没有任何功能。
I have tried this , this , this , and more, and many of the answers found within each of those. 我已经尝试过这个 , 这个 , 这个 ,以及其中的许多答案。
Edit : Here is a Git Repo. 编辑 : 这是一个Git回购。
Here is my NavBar component, currently on status #2 where it has animations but not functionality: 这是我的NavBar组件,目前处于状态#2,它具有动画但不具有功能:
import React from 'react';
import { Paper, Tabs, Tab } from '@material-ui/core';
const navStyle= {
backgroundColor: '#220000',
color: '#fff',
}
export class NavBar extends React.Component {
state = {
value: 0,
};
handleChange = (event, value) => {
event.preventDefault();
this.setState({ value });
console.log(value)
};
render() {
return (
<div>
<Paper>
<Tabs
value={this.state.value}
onChange={this.handleChange}
indicatorColor={"secondary"}
// textColor="secondary"
centered
style={navStyle}
>
<Tab label="Home" href='/' />
<Tab label="About" href='/about' />
</Tabs>
</Paper>
</div>
)}
}
dependencies: 依赖关系:
"@material-ui/core": "^1.3.1",
"history": "^4.7.2",
"prop-types": "^15.6.2",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-router-dom": "^4.3.1",
"react-scripts": "1.1.4"
You could make your Tab
components into React Router Link
components the same way that it is done in the first example you linked. 您可以将
Tab
组件设置为React Router Link
组件,就像在链接的第一个示例中一样。
Just make sure not to preventDefault
on the handleChange
event, since that would stop the links from working. 只要确保不要
preventDefault
在handleChange
事件,因为这会停止工作的联系。
Example 例
class App extends React.Component {
state = {
value: 0
};
handleChange = (event, value) => {
this.setState({ value });
};
render() {
return (
<BrowserRouter>
<div>
<Paper>
<Tabs
value={this.state.value}
onChange={this.handleChange}
indicatorColor={"secondary"}
centered
style={navStyle}
>
<Tab label="Home" to="/" component={Link} />
<Tab label="About" to="/about" component={Link} />
</Tabs>
</Paper>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
</Switch>
</div>
</BrowserRouter>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.