fix: use hash router instead of browser router in react app

web/src/App.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Route, BrowserRouter, Switch, Redirect } from 'react-router-dom'
+import { Route, HashRouter, Switch, Redirect } from 'react-router-dom'
 import { ThemeProvider } from '@mui/material/styles'
 import { theme } from './theme'
 
@@ -10,7 +10,7 @@ import SASjsStudio from './containers/SASjsStudio'
 function App() {
   return (
     <ThemeProvider theme={theme}>
-      <BrowserRouter>
+      <HashRouter>
         <Header />
         <Switch>
           <Route exact path="/">
@@ -23,7 +23,7 @@ function App() {
             <SASjsStudio />
           </Route>
         </Switch>
-      </BrowserRouter>
+      </HashRouter>
     </ThemeProvider>
   )
 }

web/src/components/header.tsx

@@ -8,9 +8,10 @@ import Tab from '@mui/material/Tab'
 
 const Header = (props: any) => {
   const history = useHistory()
-  const [tabValue, setTabValue] = useState(0)
+  const { pathname } = useLocation()
+  const [tabValue, setTabValue] = useState(pathname)
 
-  const handleTabChange = (event: React.SyntheticEvent, value: number) => {
+  const handleTabChange = (event: React.SyntheticEvent, value: string) => {
     setTabValue(value)
   }
   return (
@@ -28,7 +29,7 @@ const Header = (props: any) => {
             marginRight: '25px'
           }}
           onClick={() => {
-            setTabValue(0)
+            setTabValue('/')
             history.push('/')
           }}
         />
@@ -37,9 +38,19 @@ const Header = (props: any) => {
           value={tabValue}
           onChange={handleTabChange}
         >
-          <Tab label="Home" to="/" component={Link} />
-          <Tab label="Drive" to="/SASjsDrive" component={Link} />
-          <Tab label="Studio" to="/SASjsStudio" component={Link} />
+          <Tab label="Home" value="/" to="/" component={Link} />
+          <Tab
+            label="Drive"
+            value="/SASjsDrive"
+            to="/SASjsDrive"
+            component={Link}
+          />
+          <Tab
+            label="Studio"
+            value="/SASjsStudio"
+            to="/SASjsStudio"
+            component={Link}
+          />
         </Tabs>
       </Toolbar>
     </AppBar>

web/src/containers/SASjsDrive/sideBar.tsx

@@ -54,7 +54,7 @@ const SideBar = (props: any) => {
       window.history.pushState(
         '',
         '',
-        `${baseUrl}/SASjsDrive?filepath=${node.relativePath}`
+        `${baseUrl}/#/SASjsDrive?filepath=${node.relativePath}`
       )
       props.setSelectedFilePath(node.relativePath)
     }