当我重新加载页面时，Material-UI 选项卡指示器返回到第一个选项卡项答案

【问题标题】：Material-UI tab indicator returns back to the first tab item when i reload the page当我重新加载页面时，Material-UI 选项卡指示器返回到第一个选项卡项
【发布时间】：2020-07-26 17:25:06
【问题描述】：

我使用 react 路由器实现了 material-ui 选项卡。当我单击一个选项卡时，选项卡指示器（选项卡下方的一条蓝线）按预期工作，它会移动到按下哪个选项卡。问题在于，当我重新加载页面时，选项卡指示器会返回到第一个选项卡项。

我想这可能是因为选项卡的初始值为零，所以当页面重新加载时，该值又变为零了。

import React, { useState } 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 { Link, Switch, Route } from 'react-router-dom';
import { Paper } from '@material-ui/core';

/**
 * This component handles the routing and navigating the user to different sections
 */
export default function Navbar() {
  const classes = NavbarStyles();
  const [value, setValue] = 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"
        >
         <Tab label="Sign In" to="/signin" component={Link} />
         <Tab label="Sign Up" to="/signup" component={Link} />
         <Tab label="About" to="/about" component={Link} />
        </Tabs>
      </Paper>

      <Switch>
        <Route component={SignIn} path="/signin" />
        <Route component={SignUp} path="/signup" />
        <Route component={About} path="/about" />
      </Switch>

    </div>
  );
}


import { makeStyles } from '@material-ui/core/styles';

// This component contains the styles that is being used by its intented component
export default function NavbarStyles() {

    const useStyles = makeStyles((theme) => ({
        root: {
          flexGrow: 1,
          width: '100%',
          backgroundColor: theme.palette.background.paper,
        },
      }));

      return useStyles();

}

标签： reactjs tabs material-ui react-router-dom

【解决方案1】：

这是基于 Firealem Erkos 代码。刷新时，我正在加载 0，然后高亮栏会滑到我当前的位置.. 看起来很奇怪.. 所以我没有用 usestate(0) 替换 0 为 currentTab ...我计算了显示在下面的代码。现在，当您刷新时，0 不会短暂突出显示。

   const currentTab = () => {
    let path = window.location.pathname
    if (path === "/Search") return 1
    else if (path === "/ZoneInformation") return 2
    else if (path === "/Contact") return 3
  }
 
  const [value, setValue] = React.useState(**currentTab**);

【讨论】：

【解决方案2】：

遇到了同样的问题，这就是我解决它的方法。它重置为主页，因为在页面刷新时，Tabs 的初始值为 0。为了防止这种情况，请在 handleChange 函数正下方添加一个带有依赖数组的 useEffect。

useEffect(() => {
    let path = props.location.pathname;
    if (path === "/signin" && value !== 0) setValue(0);
    else if (path === "/signup" && value !== 1) setValue(1);
    else if (path === "/about" && value !== 2) setValue(2);
  }, [value,]);

这会在页面重新加载时设置适当的选项卡值

【讨论】：