Material-UI tab indicator returns back to the first tab item when i reload the page

Question

I implemented material-ui tabs with react router. When i click on a tab, the tab indicator which is a blue line underneath the tab works as intended, it moves to which ever tab was pressed. The problem lies that when i reload the page the tab indicator goes back to the first tab item.

I'm thinking that it may be because the initial value of the tab is zero, so when the page is reloaded the value goes to zero again.

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

}

Answer 1

Had same issue and here is how I solved it. It resets to home because, on page refresh, the initial value for Tabs is 0. To prevent this, add a useEffect with dependency array right below handleChange function.

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,]);

This sets the appropriate tab value on page reload

Answer 2

This is based on Firealem Erkos code. On refresh I was getting the 0 to load then the hilight bar would slide over to my current one.. looked weird.. so Instead of usestate(0) I replaced the 0 with currentTab... I calculated the current tab shown in the code below. now when you refresh the 0 isn't briefly highlighted.

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