반응형
index.js:1375 Warning: Material-UI: 탭 구성 요소에 제공된 '/' 값이 잘못됨.이 값을 가진 탭 하위 탭 없음
자재 UI 탭과 리액션루터 모두 시각적으로 잘 작동하고 있지만, 개발자 도구를 사용하면서 핸드폰 사이즈의 경우 탭이나 메뉴 버튼을 클릭할 때마다 오류가 발생한다는 것을 알게 되었다.오류는 다음과 같다.
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);
당신 위에Tabs당신이 가치있는 요소location.pathname. "선택된" 탭이 이 값을 가진 탭임을 나타내며, 이 값을 지정하지 않은 경우value네 탭을 받쳐줄 수 있어값을 지정하지 않으면 탭의 값이 탭 상위 항목 내의 인덱스로 기본 설정된다.
오류 메시지는 (수직탭을 통해) 탭의 값이 개별 탭 요소(MyTab)의 값과 일치하지 않음을 알려 주는 것이다.이 문제를 해결하려면to재산으로서도.value탭 요소의 속성.
참조:
반응형
'programing' 카테고리의 다른 글
| Nuxt 라우팅 이중 옵션 매개 변수 (0) | 2022.04.02 |
|---|---|
| virtualenv에서 Python 3 사용 (0) | 2022.04.02 |
| vuex 스토어에서 vue-resource($ttp) 및 vue-router($route)를 사용하는 방법? (0) | 2022.04.01 |
| 이전에 방출된 값을 기준으로 실행 방지 (0) | 2022.04.01 |
| Vuetify 탭을 Vue-Router와 함께 사용하는 방법 (0) | 2022.04.01 |