index.js:1375 警告：Material-UI：提供给选项卡组件的 `/` 值无效。没有一个 Tabs 子项具有此值

Question

我正在使用 Material UI 选项卡和 React-Router，两者在视觉上都运行良好，但我在使用开发人员工具时意识到每次单击选项卡或在手机尺寸的情况下单击菜单按钮时都会出现错误。错误说：

index.js:1375 Warning: Material-UI: the value provided/to the Tabs component is invalid. None of the Tabs children have this value. You can provide one of the following values: 0, 1, 2, 3, 4, 5.

我尝试用状态和活动索引结构替换路由器，但错误仍然存​​在。如何确保在单击选项卡或菜单按钮时不会发生错误？以及如何确保它通过相关路径将我们顺利引导到相关页面？谢谢

PS：他们指向的屏幕都是文本，目前，没有什么特别的，如果需要显示代码，我可以编辑帖子，尽管我对此表示怀疑。再次感谢

import React from 'react';
import AppBar from '@material-ui/core/AppBar';
import CssBaseline from '@material-ui/core/CssBaseline';
import Drawer from '@material-ui/core/Drawer';
import Hidden from '@material-ui/core/Hidden';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import { makeStyles, withStyles } from '@material-ui/core/styles';
import SearchBar from '../TopBar/SearchBar'
import Home from '../Screens/Home'
import home from '../home.svg';
import Contact from '../Screens/Contact'
import contact from '../contact.svg';
import Profile from '../Screens/Profile'
import profile from '../profile.svg';
import Settings from '../Screens/Settings'
import settings from '../settings.svg'
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import { Switch, Route, Link, BrowserRouter} from "react-router-dom";



const VerticalTabs = withStyles(theme => ({
  flexContainer: {
    flexDirection: "column"
  },
  indicator: {
    display: "red"

  },

  root:{
    position:"fixed",
    left:-70,
    top:0,

  },

}))(Tabs);

const MyTab = withStyles(theme => ({
  selected: {
    color: "white",
    borderRight: "none",


  },
  root: {
  //minWidth: 121,
  margin:0,
 paddingBottom:119

  },
  '@media screen and (min-width: 600px) and (max-width: 1205px)':{

    root: {
      minWidth: 151,
    }
  }
}))(Tab);


const styles = theme => ({
  root: {
    flexGrow: 1,
    marginTop: theme.spacing(3),
    backgroundColor: theme.palette.background.paper,

  },
  tabRoot: {
    minWidth: 10,
  },
});

const useStyles = makeStyles(theme => ({
  root: {
    display: 'flex',

  },
  menuButton:{
    visibility: "hidden"
  },

  appBar: {
    marginLeft: 300,


  },
  drawerPaper: {
    width: 100,
background: "#262A2C",
fontSize:65,
height:"120%",
top:-10


      },


      content: {
        flexGrow: 1,
        padding: theme.spacing(3),

      },

      '@media screen and (min-width: 600px) and (max-width: 1205px)':{
        drawerPaper: {
          width: 80,
      //background: "black"
        },


      },

      '@media (max-width: 600px)':{

        drawerPaper: {
          width: 300,
      //background: "black"
        },
  appBar: {



  },
  menuButton:{
   visibility: "visible"
 },
  }

}));



function ResponsiveDrawer() {
  const [value, setValue] = React.useState(0);
  const classes = useStyles();
  const [mobileOpen, setMobileOpen] = React.useState(false);

  function handleChange(event, Value) {
    setValue(Value);
  }




  function handleDrawerToggle() {
    setMobileOpen(!mobileOpen);
  }

  const drawer = (




    <Route
          path="/"
          render={({ location }) => (

              <nav>
                  <div style={{ left: 70, position: "relative", marginTop: 40 }}>

      <VerticalTabs value={location.pathname} variant="fullWidth" onChange={handleChange}  
          >
        <MyTab  
        component={Link} to="/"
        icon ={<img 
        className= "home"
        src={home} 
        alt="home" 
        /*Pay FlatIcon or replace by design *//>}
        label={<p className="home-Text" >
        Home
        </p>} 
        />
        <MyTab  
        component={Link} to="/Screens/Contact"
        icon ={<img 
        className= "contact"
        src={contact}  
        alt="contact" 
        /*Pay FlatIcon or replace by design *//>}
        label={<p className="contacts-Text" >
       Contact
        </p>} 
        />
        <MyTab 
             component={Link} to="/Screens/Profile"
        icon={<img 
        className= "profile" 
        src={profile} 
        alt="profile" 
        /*Pay FlatIcon or replace by design *//>}
        label={<p className= "profile-Text" >
       Profile
        </p>} 
        />
        <MyTab 
             component={Link} to="/Screens/Settings"
        icon = {<img
        className= "settings" 
        src={settings} 
         alt="settings"
        /*Pay FlatIcon or replace by design *//>}
        label={<p className="settings-Text" >
      Settings
        </p>} 
        />


      </VerticalTabs>

                  </div>
                  </nav>

          )}
          />





  );

  return (
    <nav>
    <BrowserRouter>
    <div className="aBar">
      <CssBaseline />
      <AppBar style={{position:"relative",background: 'transparent', boxShadow: 'none', color: "red"}}>
        <Toolbar>
          <IconButton
            color="inherit"
            aria-label="Open drawer"
            edge="start"
            onClick={handleDrawerToggle}
            className={classes.menuButton}
          >
            <MenuIcon />

          </IconButton>
          <SearchBar />
          <div className="logo">
          <Typography 
          component={Link}
          to="/"
          className= "logo-Spec" 
          style={{fontSize:30, textDecoration: 'none' }} 
          variant="h1"
          //don't forget variant= "h1" if you want to modify logo style
          >

          Logo 

          </Typography>
          </div>
        </Toolbar>
      </AppBar>
      <nav className={classes.drawer}>
        {/* The implementation can be swapped with js to avoid SEO duplication of links. */}
        <Hidden smUp implementation="css">
          <Drawer
          style={{color:"black"}}
            variant="temporary"
            open={mobileOpen}
            onClose={handleDrawerToggle}
            classes={{
              paper: classes.drawerPaper,
            }}
            ModalProps={{
              keepMounted: true, // Better open performance on mobile.
            }}
          >
            {drawer}
          </Drawer>

        </Hidden>
        <Hidden xsDown implementation="css">
          <Drawer
            classes={{
              paper: classes.drawerPaper,
            }}
            variant="permanent"
            open
          >
            {drawer}
          </Drawer>

        </Hidden>

        <Switch>

                <Route path="/Screens/Contact" component={Contact}  />
                <Route path="/Screens/Settings" component={Settings} />
                <Route path="/Screens/Profile" component={Profile}  />
                <Route path="/" component={Home} />

              </Switch>
      </nav>

    </div>
    </BrowserRouter>
    </nav>
  );
}




export default  withStyles(styles)(ResponsiveDrawer);

Answer 1

在您的Tabs元素上，您的值为location.pathname。这表明“选定的”选项卡是具有此值的选项卡，但您没有value为任何选项卡指定一个 prop。当未指定值时，选项卡的值默认为其在选项卡父级中的索引。

\n\n

该错误消息告诉您选项卡上的值（通过 VerticalTabs）与单个选项卡元素 (MyTab) 上的任何值都不匹配。要解决此问题，您应该将属性中的值to也指定为valueTab 元素上的属性。

\n\n

参考：

\n\n

\n
• https://material-ui.com/api/tabs/
\n
• https://material-ui.com/api/tab/
\n

\n