Как сделать индикатор вкладки в Material UI отзывчивым?

Question

Мне удается реализовать реагирующий маршрутизатор с помощью Material-UI. Маршрутизация работает по назначению, когда вы нажимаете на вкладку, она направляет вас к соответствующему компоненту.

Проблема, с которой я сталкиваюсь, заключается в том, что при нажатии на одну из вкладок синий подчеркивающий индикатор, который поставляется с Material- Пользовательский интерфейс не перемещается в соответствии с вкладкой, на которой он был нажат. Это остается той же позиции.

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

Некоторые замечания:

• Вкладки принимают Tab как дочерний
• Использовать реквизиты component для обработки стороннего компонента JSX
• Use реквизиты до для обработки 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>