javascript - Using @Material-UI Tabs as Navbar - Stack Overflow

admin管理员组

文章数量:1332389

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 ponents 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.

I have tried this, this, this, and more, and many of the answers found within each of those.

Edit: Here is a Git Repo.

Here is my NavBar ponent, currently on status #2 where it has animations but not functionality:

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"

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 ponents 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.

I have tried this, this, this, and more, and many of the answers found within each of those.

Edit: Here is a Git Repo.

Here is my NavBar ponent, currently on status #2 where it has animations but not functionality:

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"

• javascript
• reactjs
• navigation
• navbar
• material-ui

Share Follow edited Jul 13, 2018 at 1:30 Brittany G asked Jul 12, 2018 at 20:30 Brittany GBrittany G 7311 silver badge44 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You could make your Tab ponents into React Router Link ponents the same way that it is done in the first example you linked.

Just make sure not to preventDefault on the handleChange event, since that would stop the links from working.

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="/" ponent={Link} />
              <Tab label="About" to="/about" ponent={Link} />
            </Tabs>
          </Paper>
          <Switch>
            <Route exact path="/" ponent={Home} />
            <Route path="/about" ponent={About} />
          </Switch>
        </div>
      </BrowserRouter>
    );
  }
}

本文标签： javascriptUsing MaterialUI Tabs as NavbarStack Overflow