如何使 Material UI 中的选项卡指示器响应？

Question

我设法用 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> );}

Answer 1

一些注意点：

• 选项卡接受选项卡作为子项

• 使用 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>