Question

我设法用material-ui实现React Router。路由按预期工作，当您单击选项卡时，会将您路由到适当的组件。

我遇到的问题是，当您单击选项卡之一时，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

一些注意点：

标签将Tab视为子项
使用道具 component 处理第三方JSX组件
使用道具来处理路由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>

MDN docs

如何使“材质用户界面”中的选项卡指示器响应式？

1 个答案: