使用 @Material-UI 选项卡作为导航栏

Posted 2023-04-13

【中文标题】使用 @Material-UI 选项卡作为导航栏

【英文标题】：Using @Material-UI Tabs as Navbar

【发布时间】：2018-12-21 04:14:10

【问题描述】：

对编码空间相当陌生。我尝试到处寻找这个问题的答案，虽然我找到了很多答案，但没有一个对我有用。

我的问题是我想将@Material-UI 选项卡组件用作导航栏，而我似乎只能 1. 将选项卡转换为可以工作但没有动画或指示器的静态链接，或者 2. 保留动画，但没有改变页面的功能。

我尝试了this、this、this 等，并在其中找到了许多答案。

编辑：Here 是一个 Git 存储库。

这是我的 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>
    )
 

依赖：

"@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"

【参考方案1】：

你可以将你的 Tab 组件变成 React Router Link 组件，就像在你链接的第一个示例中一样。

请确保不要在 handleChange 事件中使用 preventDefault，因为这会阻止链接工作。

示例

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