肥皂起泡泡
2022-06-16 15:16:12
我設法用 material-ui 實現反應路由器。路由按預期工作,當您單擊選項卡時,它會將您路由到相應的組件。我遇到的問題是,當您單擊其中一個選項卡時,Material-ui 附帶的藍色下劃線指示器不會根據單擊的選項卡移動。它停留在相同的位置。import React from 'react';import Tabs from '@material-ui/core/Tabs';import Tab from '@material-ui/core/Tab';import SignIn from '../signIn/SignIn'import SignUp from '../signUp/SignUp';import About from '../about/About';import NavbarStyles from './NavbarStyles';import a11yProps from './NavbarStyles';import { Link, Switch, Route } from 'react-router-dom';import { Paper } from '@material-ui/core';export default function Navbar() { const classes = NavbarStyles(); const [value, setValue] = React.useState(0); const handleChange = (event, newValue) => { setValue(newValue); };return (<div className={classes.root}> <Paper> <Tabs value={value} onChange={handleChange} variant="scrollable" scrollButtons="on" indicatorColor="primary" textColor="primary" aria-label="scrollable force tabs example" > <Link to="/signin"><Tab label="Sign In" {...a11yProps(0)} /></Link> <Link to="/signup"><Tab label="Sign Up" {...a11yProps(1)} /></Link> <Link to="/about"><Tab label="About" {...a11yProps(2)} /></Link> </Tabs> </Paper> <Switch> <Route component={SignIn} path="/signin" /> <Route component={SignUp} path="/signup" /> <Route component={About} path="/about" /> </Switch></div> );}
1 回答

PIPIONE
TA貢獻1829條經驗 獲得超9個贊
一些注意點:
選項卡接受選項卡作為子項
使用 props組件處理第三方 JSX 組件
使用 props處理路由 URL
import { Tabs, Tab } from "@material-ui/core";
import { Link, BrowserRouter } from "react-router-dom";
<Tabs
value={value}
onChange={handleChange}
variant="scrollable"
scrollButtons="on"
indicatorColor="primary"
textColor="primary"
aria-label="scrollable force tabs example"
>
<Tab label="Sign In" component={Link} to={"/signin"} />
<Tab label="Sign Up" component={Link} to={"/signup"} />
<Tab label="About" component={Link} to={"/about"} />
</Tabs>
添加回答
舉報
0/150
提交
取消