How can I make auto open one of the layout components while reloading?

I’m facing a problem with nested routers! I have few nested layouts (few layouts for few services), either I have tabs with links which is a parent Layout for services layouts. Is it posible to make a default open page(service layout) by first meet the site and save an opened page after reloading.

Root of the routing. For example I need to open FirstServiceLayout by default.
Tabs were made by mui Tabs component with Link component from react-router-dom.
AppLayout component handle the Tabs component

<Route path='index/*' element={<AppLayout/>}>
              <Route path='first-main' element={<FirstServiceLayout/>}>
                <Route path="first-service-page-one" element={<FirstServicePageOne/>}/>
                <Route path='first-service-page-two' element={<FirstServicePageTwo/>}/>
              </Route>
              <Route path='second-main' element={<FirstServiceLayout/>}>
                  <Route path='second-service-page' element={<SecondServicePage/>}/>
              </Route>
          </Route>

I’ve tried to fetch user accesses for services and use useNavigate hook in AppLayout component to navigate the page I need.

>Solution :

It looks like you are using React with React Router and Material-UI Tabs for your application routing. To achieve the behavior you want (opening a specific service layout by default and preserving the state after a reload), you can use the following approach:

UseLocalStorage:
Store the selected service layout in the browser’s local storage.
On page load, check if there is a stored service layout. If yes, navigate to that layout.

// AppLayout.jsx

import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

const AppLayout = () => {
  const navigate = useNavigate();

  useEffect(() => {
    const storedLayout = localStorage.getItem('selectedLayout');

    if (storedLayout) {
      navigate(`index/${storedLayout}`);
    }
  }, [navigate]);

  // ... rest of your component code
};

export default AppLayout;

Set Default Layout:
If there is no stored layout, set a default layout to open.

// AppLayout.jsx

useEffect(() => {
  const storedLayout = localStorage.getItem('selectedLayout');

  if (storedLayout) {
    navigate(`index/${storedLayout}`);
  } else {
    // If no stored layout, set a default layout and store it in local storage
    const defaultLayout = 'first-main';
    localStorage.setItem('selectedLayout', defaultLayout);
    navigate(`index/${defaultLayout}`);
  }
}, [navigate]);

Update Local Storage on Tab Change:
When the user changes the tab, update the local storage to reflect the current selected service layout.

// AppLayout.jsx

const handleTabChange = (event, newValue) => {
  // Update local storage with the selected layout
  localStorage.setItem('selectedLayout', newValue);
  navigate(`index/${newValue}`);
};

// ... rest of your component code

<Tabs value={/* current tab value */} onChange={handleTabChange}>
  {/* your tab components */}
</Tabs>

With these changes, the selected service layout should be persisted in local storage, and on page reload, the user will be redirected to the last selected layout. If there’s no stored layout, it will default to the first service layout.