router working with navigation and links

src/index.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './index.css';
-import reportWebVitals from './reportWebVitals';
-import {Canvas} from "./index/Canvas";
-import {Nav} from "./nav/Nav";
+import './index.scss';
 import {RouterProvider} from "./router/RouterContext";
 import {Route} from "./router/Route";
 
+const Canvas = React.lazy(() => import("./index/Canvas"));
+const About = React.lazy(() => import("./about/AboutPage"));
+const Nav = React.lazy(() => import("./nav/Nav"));
+
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
@@ -18,6 +19,9 @@ root.render(
       <Route path="/">
         <Canvas/>
       </Route>
+      <Route path="/about">
+        <About/>
+      </Route>
     </RouterProvider>
   </React.StrictMode>
 );
@@ -25,4 +29,4 @@ root.render(
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+//reportWebVitals();