Индикатор вкладки Material-UI возвращается к первому элементу вкладки при перезагрузке страницы - PullRequest
Новая
       63

Индикатор вкладки Material-UI возвращается к первому элементу вкладки при перезагрузке страницы

0 голосов
/ 14 апреля 2020

Я реализовал вкладки material-ui с реагирующим маршрутизатором. Когда я нажимаю на вкладку, индикатор вкладки, который является синей линией под вкладкой, работает как задумано, он перемещается к той вкладке, которая когда-либо была нажата. Проблема заключается в том, что при перезагрузке страницы индикатор вкладки возвращается к первому элементу вкладки.

Я думаю, что это может быть потому, что начальное значение вкладки равно нулю, поэтому при перезагрузке страницы значение снова обнуляется.

sign up page

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();

}
...