samples: fixing browser router (#2711)

* Fixing Browser Router
* Fixing basename for routing

Author: sebastienlevert

samples/react-contoso/package.json

@@ -23,11 +23,14 @@
     "eslint-config-react-app": "^7.0.1",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^6.15.0",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
+  },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",

samples/react-contoso/public/incidents.json

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BrowserRouter, Route, Switch } from 'react-router-dom';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import { Header } from './components/Header';
 import { SideNavigation } from './components/SideNavigation';
 import { HomePage } from './pages/HomePage';
@@ -67,7 +67,7 @@ export const Layout: React.FunctionComponent = theme => {
   return (
     <FluentProvider theme={appContext.state.theme.fluentTheme}>
       <div className={styles.page}>
-        <BrowserRouter basename={process.env.BASE_DIR ?? '/'}>
+        <BrowserRouter basename={process.env.REACT_APP_BASE_DIR ?? '/'}>
           <Header></Header>
           <div className={styles.main}>
             <div
@@ -79,15 +79,15 @@ export const Layout: React.FunctionComponent = theme => {
               <SideNavigation items={navigationItems}></SideNavigation>
             </div>
             <div className={styles.content}>
-              <Switch>
+              <Routes>
                 {navigationItems.map(
                   item =>
                     ((item.requiresLogin && isSignedIn) || !item.requiresLogin) && (
-                      <Route exact={item.exact} path={item.url} children={item.component} key={item.key} />
+                      <Route path={item.url} element={item.component} key={item.key} />
                     )
                 )}
-                <Route path="*" component={HomePage} />
-              </Switch>
+                <Route path="*" element={<HomePage />} />
+              </Routes>
             </div>
           </div>
         </BrowserRouter>

samples/react-contoso/src/Layout.tsx

@@ -4,7 +4,7 @@ import { PACKAGE_VERSION } from '@microsoft/mgt-element';
 import { InfoButton } from '@fluentui/react-components/unstable';
 import { SimpleLogin } from './SimpleLogin';
 import { useIsSignedIn } from '../hooks/useIsSignedIn';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import { ThemeSwitcher } from './ThemeSwitcher';
 import { useAppContext } from '../AppContext';
 import { Label, makeStyles, mergeClasses, shorthands, tokens } from '@fluentui/react-components';
@@ -115,16 +115,16 @@ const HeaderComponent: React.FunctionComponent = () => {
   const appContext = useAppContext();
   const setAppContext = appContext.setState;
   const location = useLocation();
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const onSearchTermChanged = (e: CustomEvent) => {
     if (!(e.detail === '' && appContext.state.searchTerm === '*') && e.detail !== appContext.state.searchTerm) {
       appContext.setState({ ...appContext.state, searchTerm: e.detail === '' ? '*' : e.detail });
 
       if (e.detail === '') {
-        history.push('/search');
+        navigate('/search');
       } else {
-        history.push('/search?q=' + e.detail);
+        navigate('/search?q=' + e.detail);
       }
     }
   };

samples/react-contoso/src/components/Header.tsx

@@ -1,6 +1,6 @@
 import { Tab, TabList, makeStyles, mergeClasses, tokens } from '@fluentui/react-components';
 import * as React from 'react';
-import { useHistory, useLocation } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 import { NavigationRegular } from '@fluentui/react-icons';
 import { useAppContext } from '../AppContext';
 import { NavigationItem } from '../models/NavigationItem';
@@ -20,15 +20,15 @@ const useStyles = makeStyles({
 });
 
 export const SideNavigation: React.FunctionComponent<ISideNavigationProps> = props => {
-  const history = useHistory();
+  const navigate = useNavigate();
   const location = useLocation();
   const { items } = props;
-  const [selectedTab, setSelectedTab] = React.useState<any>('/');
+  const [selectedTab, setSelectedTab] = React.useState<any>('');
   const [isMinimized, setIsMinimized] = React.useState<boolean>(false);
   const styles = useStyles();
   const appContext = useAppContext();
 
-  const navigate = (event: any, data: any) => {
+  const performNavigation = (event: any, data: any) => {
     if (data.value === 'navigation') {
       const futureIsMinimized = !isMinimized;
       setIsMinimized(futureIsMinimized);
@@ -37,18 +37,17 @@ export const SideNavigation: React.FunctionComponent<ISideNavigationProps> = pro
         sidebar: { ...appContext.state.sidebar, isMinimized: futureIsMinimized }
       });
     } else {
-      setSelectedTab(data.value);
-      history.push(data.value);
+      navigate(data.value, { relative: 'route' });
     }
   };
 
   React.useLayoutEffect(() => {
-    setSelectedTab(location.pathname);
+    setSelectedTab(location.pathname.substring(1));
   }, [location]);
 
   return (
     <>
-      <TabList size="medium" appearance="subtle" vertical onTabSelect={navigate} selectedValue={selectedTab}>
+      <TabList size="medium" appearance="subtle" vertical onTabSelect={performNavigation} selectedValue={selectedTab}>
         <Tab icon={<NavigationRegular />} value={'navigation'} className={styles.tab}></Tab>
         {items.map((item: NavigationItem, index) => (
           <Tab

samples/react-contoso/src/components/SideNavigation.tsx

@@ -21,7 +21,7 @@ export const getNavigation = (isSignedIn: boolean) => {
 
   navItems.push({
     name: 'Home',
-    url: '/',
+    url: '',
     icon: <HomeRegular />,
     key: 'home',
     requiresLogin: false,
@@ -32,7 +32,7 @@ export const getNavigation = (isSignedIn: boolean) => {
   if (isSignedIn) {
     navItems.push({
       name: 'Dashboard',
-      url: '/dashboard',
+      url: 'dashboard',
       icon: <TextBulletListSquareRegular />,
       key: 'dashboard',
       requiresLogin: true,
@@ -42,7 +42,7 @@ export const getNavigation = (isSignedIn: boolean) => {
 
     navItems.push({
       name: 'Mail and Calendar',
-      url: '/outlook',
+      url: 'outlook',
       icon: <CalendarMailRegular />,
       key: 'outlook',
       requiresLogin: true,
@@ -52,7 +52,7 @@ export const getNavigation = (isSignedIn: boolean) => {
 
     navItems.push({
       name: 'Files',
-      url: '/files',
+      url: 'files',
       icon: <DocumentRegular />,
       key: 'files',
       requiresLogin: true,
@@ -62,7 +62,7 @@ export const getNavigation = (isSignedIn: boolean) => {
 
     navItems.push({
       name: 'Taxonomy',
-      url: '/taxonomy',
+      url: 'taxonomy',
       icon: <TagMultipleRegular />,
       key: 'files',
       requiresLogin: true,
@@ -72,7 +72,7 @@ export const getNavigation = (isSignedIn: boolean) => {
 
     navItems.push({
       name: 'Chat',
-      url: '/chat',
+      url: 'chat',
       icon: <ChatRegular />,
       key: 'chat',
       requiresLogin: true,
@@ -82,7 +82,7 @@ export const getNavigation = (isSignedIn: boolean) => {
 
     navItems.push({
       name: 'Search',
-      url: '/search',
+      url: 'search',
       pattern: '/search/:query',
       icon: <SearchRegular />,
       key: 'search',