basic routing

movies-frontend/src/main.jsx

@@ -1,10 +1,36 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App'
-import './index.css'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import App from "./App";
+import "./index.css";
+import Comments from "./routes/comments";
+import Movies from "./routes/movies";
+import Profile from "./routes/profile";
+import Root from "./routes/root";
 
-ReactDOM.createRoot(document.getElementById('root')).render(
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <Root />,
+    children: [
+      {
+        path: "movies",
+        element: <Movies />,
+      },
+      {
+        path: "comments",
+        element: <Comments />,
+      },
+      {
+        path: "profile",
+        element: <Profile />,
+      },
+    ],
+  },
+]);
+
+ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
-    <App />
+    <RouterProvider router={router} />
   </React.StrictMode>
-)
+);

movies-frontend/src/routes/comments.jsx

@@ -0,0 +1,7 @@
+export default function Comments() {
+  return (
+    <>
+      <h2>Comments</h2>
+    </>
+  );
+}

movies-frontend/src/routes/movies.jsx

@@ -0,0 +1,7 @@
+export default function Movies() {
+  return (
+    <>
+      <h2>Movies</h2>
+    </>
+  );
+}

movies-frontend/src/routes/profile.jsx

@@ -0,0 +1,7 @@
+export default function Profile() {
+  return (
+    <>
+      <h2>My Profile</h2>
+    </>
+  );
+}

movies-frontend/src/routes/root.jsx

@@ -0,0 +1,14 @@
+import { Outlet } from "react-router";
+
+export default function Root() {
+  return (
+    <>
+      <div id="header">
+        <h1>React Movies</h1>
+      </div>
+      <div id="detail">
+        <Outlet />
+      </div>
+    </>
+  );
+}