Add page components to router

client/src/Router.tsx

 import React from "react";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import UserLayout from "./components/UserLayout";
-import Book from "./pages/Book";
+import BookingForm from "./pages/BookingForm";
+import BookingSignOut from "./pages/BookingSignOut";
+import BookingSignOutSuccess from "./pages/BookingSignOutSuccess";
+import BookingSuccessful from "./pages/BookingSuccessful";
 import Home from "./pages/Home";
 
 function Router() {
@@ -12,15 +15,16 @@ function Router() {
           {/* Home page (user) */}
           <Route index element={<Home />} />
           {/* Book a boat (user) */}
-          <Route path="book" element={<Book />}>
+          <Route path="book">
+            <Route index element={<BookingForm />} />
             {/* After booking (user) */}
-            <Route path="success" element={null} />
+            <Route path="success" element={<BookingSuccessful />} />
           </Route>
           {/* Sign out (user) */}
           <Route path="signout">
-            <Route path=":id" element={null} />
+            <Route path=":id" element={<BookingSignOut />} />
             {/* After Sign out (user) */}
-            <Route path="success" element={null} />
+            <Route path="success" element={<BookingSignOutSuccess />} />
           </Route>
         </Route>
       </Routes>