17-routes

Author: tylermcginnis

app/index.jsx

@@ -3,15 +3,21 @@ import * as ReactDOM from "react-dom/client";
 import "./index.css";
 import Popular from "./components/Popular";
 import Battle from "./components/Battle";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 
 class App extends React.Component {
   render() {
     return (
-      <div className="light">
-        <div className="container">
-          <Popular />
+      <Router>
+        <div className="light">
+          <div className="container">
+            <Routes>
+              <Route path="/" element={<Popular />} />
+              <Route path="/battle" element={<Battle />} />
+            </Routes>
+          </div>
         </div>
-      </div>
+      </Router>
     );
   }
 }

package-lock.json

@@ -18,7 +18,8 @@
   "dependencies": {
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.18.10",

package.json

@@ -6,6 +6,7 @@ module.exports = {
   output: {
     path: path.resolve(__dirname, "dist"),
     filename: "index_bundle.js",
+    publicPath: "/",
   },
   module: {
     rules: [
@@ -22,4 +23,7 @@ module.exports = {
       template: "app/index.html",
     }),
   ],
+  devServer: {
+    historyApiFallback: true,
+  },
 };