tried to make react router work, still WIP

src/index.tsx

@@ -1,5 +1,19 @@
-import * as React from 'react' 
+import * as React from "react";
-import { createRoot } from 'react-dom/client' 
+import { createRoot } from "react-dom/client";
-import App from "./components/App"
+import App from "@components/App";
+import ErrorPage from "@components/ErrorPage";
+import { createBrowserRouter, RouterProvider, Route } from "react-router-dom";
 
-createRoot(document.querySelector("#root")).render(<App />)
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <App />,
+    errorElement: <ErrorPage />,
+  },
+]);
+
+createRoot(document.querySelector("#root")).render(
+  <React.StrictMode>
+    <RouterProvider router={router} />
+  </React.StrictMode>
+);

src/scss/error.scss

@@ -0,0 +1,12 @@
+main {
+    #error-page{
+        display: flex;
+        flex-direction: column;
+
+        width: 25vw;
+        height: 35vh;
+
+        justify-content: space-evenly;
+        align-items: center;
+    }
+}

webpack.config.js

@@ -14,7 +14,11 @@ module.exports = (env, argv) => {
         output: {
             filename: "[name].[contenthash:10].js",
             path: path.resolve(__dirname, "dist"),
-            clean: true
+            clean: true,
+            publicPath: '/'
+        },
+        devServer: {
+            historyApiFallback: true
         },
         module: {
             rules: [
@@ -68,4 +72,4 @@ module.exports = (env, argv) => {
             chunkFilename: '[id].css'
         })])
     }
-}
+}