From 4e80933ea94a28bdffdc5a989e42e1ffb288ad04 Mon Sep 17 00:00:00 2001
From: Karma Riuk <riukkarma@gmail.com>
Date: Thu, 20 Oct 2022 09:05:43 +0200
Subject: [PATCH] tried to make react router work, still WIP

---
 src/index.tsx       | 22 ++++++++++++++++++----
 src/scss/error.scss | 12 ++++++++++++
 webpack.config.js   |  8 ++++++--
 3 files changed, 36 insertions(+), 6 deletions(-)
 create mode 100644 src/scss/error.scss

diff --git a/src/index.tsx b/src/index.tsx
index dea1284..f841048 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,5 +1,19 @@
-import * as React from 'react' 
-import { createRoot } from 'react-dom/client' 
-import App from "./components/App"
+import * as React from "react";
+import { createRoot } from "react-dom/client";
+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>
+);
diff --git a/src/scss/error.scss b/src/scss/error.scss
new file mode 100644
index 0000000..6c3ea86
--- /dev/null
+++ b/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;
+    }
+}
diff --git a/webpack.config.js b/webpack.config.js
index 8f9d105..e08f188 100644
--- a/webpack.config.js
+++ b/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'
         })])
     }
-}
\ No newline at end of file
+}