fix: use layout as a parent element

gabrielborgesdm · May 24, 2024 · 5a1a7c0 · 5a1a7c0
1 parent 3854115
commit 5a1a7c0
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 13 deletions.
diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
@@ -1,13 +1,10 @@
+import { Outlet } from "react-router-dom";
 import { Navbar } from "./Navbar/Navbar";
 
-interface LayoutProps {
-    element: React.ReactNode;
-}
-
-const Layout: React.FC<LayoutProps> = ({ element }) => (
+const Layout: React.FC = () => (
     <>
         <Navbar />
-        {element}
+        <Outlet />
     </>
 );
 

diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
@@ -6,20 +6,27 @@ import {
 } from "react-router-dom";
 
 import Books from 'pages/Books/Books';
-import './index.css';
-import { Navbar } from 'components/Navbar/Navbar';
 import Authors from 'pages/Authors/Authors';
 import Layout from 'components/Layout';
 
+import './index.css';
+
 const router = createBrowserRouter([
   {
     path: "/",
-    element: <Layout element={<Books />} />,
-  },
-  {
-    path: "/authors",
-    element: <Layout element={<Authors />} />,
+    element: <Layout />,
+    children: [
+      {
+        path: "",
+        element: <Books />,
+      },
+      {
+        path: "authors",
+        element: <Authors />,
+      },
+    ]
   },
+
 ]);
 
 const root = ReactDOM.createRoot(