almost done with react router dom

Author: Solodt55

src/app/components/DiffRoute.tsx

@@ -11,7 +11,7 @@
 // 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'>

src/app/components/StateRoute/PerformanceVisx/PerformanceVisx.tsx

@@ -3,7 +3,7 @@
 /* eslint-disable no-restricted-syntax */
 /* eslint-disable max-len */
 import React, { useState, useEffect } from 'react';
-import { MemoryRouter as Router, Route, NavLink, Routes, Navigate } from 'react-router-dom';
+import { MemoryRouter, Router, Route, NavLink, Routes, Navigate } from 'react-router-dom';
 import RenderingFrequency from './RenderingFrequency';
 import BarGraph from './BarGraph';
 import BarGraphComparison from './BarGraphComparison';
@@ -309,27 +309,20 @@ const PerformanceVisx = (props: PerformanceVisxProps): JSX.Element => {
         <NavLink className='router-link-performance'  end to='/'>
           Snapshots View
         </NavLink>
-        <NavLink
-          className='router-link-performance'
-          id='router-link-performance-comparison'
-          to='/comparison'
-        >
+        <NavLink className='router-link-performance' id='router-link-performance-comparison' to='/comparison'>
           Comparison View
         </NavLink>
-        <NavLink
-          className='router-link-performance'
-          to='/componentdetails'
-        >
+        <NavLink className='router-link-performance' to='/componentdetails'>
           Component Details
         </NavLink>
       </div>
 
       {renderForTutorial()}
 
       <Routes>
-        <Route exact path='/comparison' render={renderComparisonBargraph} />
-        <Route exact path='/componentdetails' render={renderComponentDetailsView} />
-        <Route exact path='/' render={renderBargraph} />
+        <Route path='/comparison' render={renderComparisonBargraph} />
+        <Route path='/componentdetails' render={renderComponentDetailsView} />
+        <Route path='/' render={renderBargraph} />
       </Routes>
     </Router>
   );

src/app/components/StateRoute/StateRoute.tsx

@@ -6,7 +6,7 @@
 /* eslint-disable max-len */
 /* eslint-disable object-curly-newline */
 import React from 'react';
-import { MemoryRouter as Router, Route, NavLink, Routes } from 'react-router-dom';
+import { MemoryRouter, Router, Route, NavLink, Routes } from 'react-router-dom';
 import { ParentSize } from '@visx/responsive';
 import Tree from './Tree';
 import ComponentMap from './ComponentMap/ComponentMap';
@@ -228,28 +228,28 @@ const StateRoute = (props: StateRouteProps) => {
   return (
     <Router>
       <div className='navbar'>
-        <NavLink className='router-link map-tab' end to='/'>
-          Map
-        </NavLink>
-        <NavLink className='router-link performance-tab' to='/performance'>
+        <NavLink to='/performance' className='router-link performance-tab'>
           Performance
         </NavLink>
-        <NavLink className='router-link history-tab' to='/history'>
+        <NavLink to='/history' className='router-link history-tab'>
           History
         </NavLink>
-        <NavLink className='router-link web-metrics-tab' to='/webMetrics'>
+        <NavLink to='/webMetrics' className='router-link web-metrics-tab'>
           Web Metrics
         </NavLink>
-        <NavLink className='router-link tree-tab' to='/tree'>
+        <NavLink to='/tree' className='router-link tree-tab'>
           Tree
         </NavLink>
+        <NavLink to='/' className='router-link map-tab' end>
+          Map
+        </NavLink>
       </div>
       <Routes>
-        <Route exact path='/performance' render={renderPerfView} />
-        <Route exact path='/history' render={renderHistory} />
-        <Route exact path='/webMetrics' render={renderWebMetrics} />
-        <Route exact path='/tree' render={renderTree} />
-        <Route exact path='/' render={renderComponentMap} />
+        <Route  to='/performance' render={renderPerfView} />
+        <Route  to='/history' render={renderHistory} />
+        <Route  to='/webMetrics' render={renderWebMetrics} />
+        <Route  to='/tree' render={renderTree} />
+        <Route  to='/' render={renderComponentMap} />
       </Routes>
     </Router>
   );

src/app/containers/StateContainer.tsx

@@ -25,7 +25,7 @@ const StateContainer = (props: StateContainerProps): JSX.Element => {
       {/* <div className='main-navbar-container'>
             <div className='main-navbar-text' />
             <div className='main-navbar'>
-              <NavLink className='main-router-link' activeClassName='is-active' exact to='/'>
+              <NavLink className='main-router-link' activeClassName='is-active' to='/'>
                 State
               </NavLink>
               <NavLink className='main-router-link' activeClassName='is-active' to='/diff'>