Co-authored-by: Jesse Rosengrant <[email protected]>

Author: Solodt55

src/app/components/App.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { MemoryRouter as Router } from 'react-router-dom';
+import {  MemoryRouter as Router  } from 'react-router-dom';
 import MainContainer from '../containers/MainContainer';
 import { ThemeProvider } from '@mui/material/styles';
 import theme from './theme';

src/app/components/DiffRoute.tsx

@@ -11,17 +11,17 @@
 // const DiffRoute = (props: DiffRouteProps): JSX.Element => (
 //   <Router>
 //     <div className='navbar'>
-//       <NavLink className='router-link' activeClassName='is-active' exact to='/'>
+//       <NavLink className='router-link' activeClassName='is-active' to='/'>
 //         Tree
 //       </NavLink>
 //       <NavLink className='router-link' activeClassName='is-active' to='/diffRaw'>
 //         Raw
 //       </NavLink>
 //     </div>
-//     <Switch>
+//     <Routes>
 //       <Route path='/diffRaw' render={() => <Diff snapshot={props.snapshot} show />} />
 //       <Route path='/' render={() => <Diff snapshot={props.snapshot} show={false} />} />
-//     </Switch>
+//     </Routes>
 //   </Router>
 // );
 

src/app/components/StateRoute/History.tsx

@@ -6,8 +6,9 @@ import React, { useEffect } from 'react';
 import { diff } from 'jsondiffpatch';
 const jsondiffpatch = require('jsondiffpatch');
 // import * as jsondiffpatch from 'jsondiffpatch';
-// import { diff } from 'jsondiffpatch';
-// import formatters from 'jsondiffpatch/src/formatters';
+import { diff } from 'jsondiffpatch';
+// import jsondiffpatch from 'jsondiffpatch/formatters';
+const jsondiffpatch = require('jsondiffpatch');
 import * as d3 from 'd3';
 import { DefaultMargin } from '../../FrontendTypes';
 import { useDispatch } from 'react-redux';
@@ -158,7 +159,6 @@ function History(props: Record<string, unknown>): JSX.Element {
       statelessCleaning(snapshots[index - 1]),
       statelessCleaning(snapshots[index]),
     );
-
     const changedState = findStateChangeObj(delta); // determines if delta had any stateful changes
     const html = jsondiffpatch.formatters.format(changedState[0]); // formats the difference into html string
     return html; // return html string

src/app/containers/StateContainer.tsx

@@ -48,7 +48,7 @@ const StateContainer = (props: StateContainerProps): JSX.Element => {
       />
       {/* )}
            />
-         </Switch> */}
+         </Routes> */}
     </div>
     // </Router>
   );