如何使 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处理路由 URLimport { Tabs, Tab } from "@material-ui/core";import { Link, BrowserRouter } from "react-router-dom";<Tabs&nbsp; value={value}&nbsp; onChange={handleChange}&nbsp; variant="scrollable"&nbsp; scrollButtons="on"&nbsp; indicatorColor="primary"&nbsp; textColor="primary"&nbsp; aria-label="scrollable force tabs example">&nbsp; <Tab label="Sign In" component={Link} to={"/signin"} />&nbsp; <Tab label="Sign Up" component={Link} to={"/signup"} />&nbsp; <Tab label="About" component={Link} to={"/about"} /></Tabs>