Set base path

src/App.jsx

@@ -9,9 +9,9 @@ const App = () => (
     <div className={styles.App}>
         <Routes>
             <Route index element={<Home />} />
-            <Route path="/movie/:movieId" element={<Movie />} />
+            <Route path="movie/:movieId" element={<Movie />} />
-            <Route path="/actor/:actorId" element={<Actor />} />
+            <Route path="actor/:actorId" element={<Actor />} />
-            <Route path="/ratings" element={<Ratings />} />
+            <Route path="ratings" element={<Ratings />} />
             <Route path="*" element={<h1>404 - Not Found</h1>} />
         </Routes>
     </div>

src/main.jsx

@@ -6,7 +6,7 @@ import { BrowserRouter } from "react-router-dom"
 
 ReactDOM.createRoot(document.getElementById("root")).render(
     <React.StrictMode>
-        <BrowserRouter>
+        <BrowserRouter basename={import.meta.env.BASE_URL}>
             <App />
         </BrowserRouter>
     </React.StrictMode>

vite.config.js

@@ -4,7 +4,7 @@ import path from "path"
 
 export default defineConfig({
     plugins: [react()],
-    base: '/movie-react-app/',
+    base: "/movie-react-app/",
     resolve: {
         alias: {
             styles: path.resolve(__dirname, "/src/styles"),