javascript - 使用@Material-UI 标签作为导航栏

Question

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

我的问题是我想将@Material-UI 选项卡组件用作 NavBar，我似乎只能 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"

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