Question

我正在使用Material UI选项卡和React-Router，两者在视觉上都可以正常工作，但是我意识到在使用Developer工具时，每次点击选项卡或菜单按钮时，在手机大小的情况下都会出错。错误提示：

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道具。如果未指定任何值，则选项卡的值默认为其在“选项卡”父级中的索引。

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

参考文献：

index.js：1375警告：Material-UI：为Tabs组件提供的值“ /”无效。 Tabs子项均不具有此值

1 个答案: