Я использую вкладки 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);
