Add HashRouter

web/features/package.json

@@ -17,6 +17,7 @@
         "gh-pages": "^6.1.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-router-dom": "^6.22.1",
         "react-scripts": "^5.0.1",
         "typescript": "^4.9.5"
     },

web/features/src/app.tsx

@@ -24,6 +24,7 @@ import {
 import Path from './components/path';
 import FeatureList from './components/featurelist';
 import { IWorkerMessage, IInitializeMessage, IInitializeResultMessage, ISearchMessage, ISearchResultMessage } from './worker/worker';
+import { useNavigate, useParams } from 'react-router-dom';
 
 const useStyles = makeStyles({
     root: {
@@ -121,8 +122,9 @@ function App() {
     const [worker, setWorker] = React.useState<Worker | null>(null);
     const [query, setQuery] = React.useState('');
 
+    const params = useParams();
     const branches = process.env.REACT_APP_BRANCHES!.split(',');
-    const defaultBranch = branches[0];
+    const defaultBranch = branches.includes(params.branch!) ? params.branch : branches[0];
     const [branch, setBranch] = React.useState(defaultBranch);
 
     const styles = useStyles();
@@ -189,11 +191,14 @@ function App() {
         setResultsTruncated(false);
     };
 
+    const navigate = useNavigate();
     const onBranchSelected = (
         ev: SelectionEvents,
         data: OptionOnSelectData
     ) => {
-        setBranch(data.optionValue ?? defaultBranch);
+        const branch = data.optionValue ?? defaultBranch;
+        setBranch(branch);
+        navigate(`/${branch}`, { replace: true });
     };
 
     return (

web/features/src/index.tsx

@@ -1,4 +1,5 @@
 import * as ReactDOM from 'react-dom/client';
+import { RouterProvider, createHashRouter } from 'react-router-dom';
 import { FluentProvider, createLightTheme } from '@fluentui/react-components';
 import '@fontsource/fira-sans';
 import App from './app';
@@ -32,14 +33,20 @@ const lightTheme = {
     ...coreTheme,
 };
 
+const router = createHashRouter([
+    {
+        path: '/:branch?',
+        element: <App />
+    }
+]);
 const root = ReactDOM.createRoot(
     document.getElementById('root') as HTMLElement
 );
 root.render(
     // https://github.com/microsoft/fluentui/issues/30450
     //<StrictMode>
     <FluentProvider theme={lightTheme}>
-        <App />
+        <RouterProvider router={router} />
     </FluentProvider>
     //</StrictMode>
 );