fix(frontend): use Route inside Routes

Author: trivikr

packages/frontend/src/Routes.tsx

@@ -1,5 +1,5 @@
 import React, { lazy, Suspense } from "react";
-import { Routes as ReactRouterRoutes } from "react-router-dom";
+import { Routes as ReactRouterRoutes, Route } from "react-router-dom";
 
 const ListNotes = lazy(() => import("./content/ListNotes"));
 const CreateNote = lazy(() => import("./content/CreateNote"));
@@ -10,10 +10,14 @@ const Routes = () => (
   <div className="mt-md-4 d-flex flex-column justify-content-center">
     <Suspense fallback={<div>Loading...</div>}>
       <ReactRouterRoutes>
-        <ListNotes path="/" />
-        <CreateNote path="/note/new" />
-        <ShowNote path="/notes/:noteId" />
-        <NotFound default />
+        <Route path="/" element={<ListNotes />}>
+          <Route index element={<ListNotes />} />
+          <Route path="notes" element={<ListNotes />}>
+            <Route path="new" element={<CreateNote />} />
+            <Route path=":noteId" element={<ShowNote />} />
+          </Route>
+          <Route element={<NotFound />} />
+        </Route>
       </ReactRouterRoutes>
     </Suspense>
   </div>

packages/frontend/src/content/ListNotes.tsx

@@ -55,7 +55,7 @@ const ListNotes = (props: any) => {
     ));
 
   const createNewNote = () => (
-    <Link key="new" to="note/new">
+    <Link key="new" to="notes/new">
       <Button variant="primary" block>
         Create a new note
       </Button>