Setting default active tab in React/ Material ui routing

Question

I am using Material Ui tabs for routing in my react app. I can set the default url (so that a '/' url will redirect to the '/firsttab' route, but this will not make the 'First' tab appear as active even if the route is correct. How can I accomplish this? Thank you!

const routes = ["/firsttab", "/secondtab"];
function MainNavigation() {
  return (
    <div >
   <IonToolbar >
      <BrowserRouter >
        <Route
          path="/"
          render={(history) => (
            <AppBar>
              <Tabs 
              className='mat-tab-nav-bar'
              TabIndicatorProps={{style: {background:'primary'}}}
              indicatorColor="primary"
              color="primary"
              variant="scrollable"
              scrollButtons="auto"
              aria-label="scrollable auto tabs"
              value={history.location.pathname !== "/" ? history.location.pathname : false}
                  >
                <Tab className="mat-tab"
                  label="First"
                  value={routes[1]}
                  component={Link}
                  to={routes[1]}
                ></Tab>
                <Tab className="mat-tab "
                  label="Second"
                  value={routes[0]}
                  component={Link}
                  to={routes[0]}
                ></Tab>
              </Tabs>
            </AppBar>
          )}
        ></Route>
       
        <Switch >
          <Route path="/scutes" component={Second}></Route>
          <Route path="/gateways" component={First}></Route>
          <Redirect exact from="/" to="/firsttab" /> <- this is the initial route redirect
        </Switch>
      </BrowserRouter>
      </IonToolbar>
    </div>

  );
}

export default MainNavigation;

Answer 1

You can create a function to retreive the tab index based on the window location, like this:

const getIndex = (location) => {
    const index = routes.findIndex(function (item, index) {
        if (item === location) return true;
    })
    return index
}

So then you can call it like this:

value={history.location.pathname !== "/" ? getIndex(history.location.pathname) : false}

Note that if you return false when the pathname is "/", no tab will be selected

You will end with something like this:

function MainNavigation() {

    const getIndex = (location) => {
        const index = routes.findIndex(function (item, index) {
            if (item === location) return true;
        })
        return index
    }

    return (
        ...
        <Tabs
        ...
        value={history.location.pathname !== "/" ? getIndex(history.location.pathname) : false}
        >
        ...
    )

Answer 2

@nico-halpe's solution is close so I built on it and here's a more complete snippet:

import React, {useState} from 'react';
import {Tab} from "@mui/material";
import {TabContext, TabList} from '@mui/lab';
import {useLocation} from "react-router-dom";
// ...

const MainNavigation = () => {
    const [tabIndex, setTabIndex] = useState('1');
    const [routes, setRoutes] = useState([
    {
        'label': 'Tab 1',
        'value': '1',
        'path': '/full/path1',
    },
    {
        'label': 'Tab 2',
        'value': '2',
        'path': '/full/path2',
    },
    ]);
    // ...
    const getIndexFromLocation = (location) => {
        const index = routes.findIndex( (item) => {
            if (item.path === location) return true;
        });
        // handle an unhandled path with a sane default.
        if (index<0)
            return routes[0].value;
        return routes[index].value;
    }
    // ...

return (
    //...
    <TabContext value={getIndexFromLocation(useLocation().pathname).toString()}>
    <TabList onChange={(e, newTabIndex) => setTabIndex(newTabIndex)}>
        {routes.map((tab) => {
            return (
                <Tab key={tab.path} label={tab.label} to={tab.path} value={tab.value} />
            );
        })}
    </TabList>
    // ...
);
}