Switched to hashrouter in order to fix routing on github pages

nguoianphu · Jul 25, 2021 · ff839a7 · ff839a7
1 parent bd94852
commit ff839a7
Show file tree

Hide file tree

Showing 3 changed files with 126 additions and 85 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -169,10 +169,9 @@ jobs:
     - name: Build web to deploy to github page
       if: runner.os != 'windows'
       run: |
-        rm -rf dist || true
+        rm -rf dist
         cp -Rf webpack.config.gh-pages.js webpack.config.js
         npm run build
-        cp dist/index.html dist/index.php
         
     - name: Deploy build/dist folder to github pages
       uses: s0/git-publish-subdir-action@develop

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,6 +1,6 @@
 import classnames from "classnames";
 import * as React from "react";
-import { Link, NavLink, Redirect, Route, Switch } from "react-router-dom";
+import { Link, NavLink, Redirect, Route, Switch, HashRouter } from "react-router-dom";
 import { CoverageType, Pokemon } from "./data";
 import ScreenDefense from "./ScreenDefense";
 import ScreenInfo from "./ScreenInfo";
@@ -49,12 +49,14 @@ export default function App() {
     <div className="sans-serif bg2 fg1 min-vh-100 flex flex-column">
       <div className="flex-auto">
         <h1 className="f3-ns f4 tc relative white PokeballHeader">
-          <Link
-            to="/"
-            className="no-underline white hover-white-90 DottedFocus"
-          >
-            Pokémon Type Calculator
-          </Link>
+          <HashRouter>
+            <Link
+              to="/"
+              className="no-underline white hover-white-90 DottedFocus"
+            >
+              Pokémon Type Calculator
+            </Link>
+          </HashRouter>
         </h1>
         <nav
           className={classnames([
@@ -64,84 +66,88 @@ export default function App() {
             "pt3",
           ])}
         >
-          <NavLink
-            className={tabClass}
-            activeClassName={tabClassActive}
-            to={`/offense${offenseParams}`}
-          >
-            Offense
-          </NavLink>
-          <NavLink
-            className={tabClass}
-            activeClassName={tabClassActive}
-            to={`/defense${defenseParams}`}
-          >
-            Defense
-          </NavLink>
-          <NavLink
-            className={tabClass}
-            activeClassName={tabClassActive}
-            to={`/pokedex${pokedexParams}`}
-          >
-            Pokédex
-          </NavLink>
-          <NavLink
-            className={tabClass}
-            activeClassName={tabClassActive}
-            to="/info"
-          >
-            Info
-          </NavLink>
+          <HashRouter>
+            <NavLink
+              className={tabClass}
+              activeClassName={tabClassActive}
+              to={`/offense${offenseParams}`}
+            >
+              Offense
+            </NavLink>
+            <NavLink
+              className={tabClass}
+              activeClassName={tabClassActive}
+              to={`/defense${defenseParams}`}
+            >
+              Defense
+            </NavLink>
+            <NavLink
+              className={tabClass}
+              activeClassName={tabClassActive}
+              to={`/pokedex${pokedexParams}`}
+            >
+              Pokédex
+            </NavLink>
+            <NavLink
+              className={tabClass}
+              activeClassName={tabClassActive}
+              to="/info"
+            >
+              Info
+            </NavLink>
+          </HashRouter>
         </nav>
         <Switch>
-          <Route
-            path="/offense/coverage"
-            render={() => (
-              <ScreenWeaknessCoverage
-                setCoverageTypes={setCoverageTypes}
-                offenseParams={offenseParams}
-                fallbackCoverageTypes={fallbackCoverageTypes}
-                isLoading={isLoading}
-              />
-            )}
-          />
-          <Route
-            path="/offense"
-            render={() => (
-              <ScreenOffense
-                coverageTypes={coverageTypes}
-                setCoverageTypes={setCoverageTypes}
-                setOffenseParams={setOffenseParams}
-                fallbackCoverageTypes={fallbackCoverageTypes}
-                isLoading={isLoading}
-              />
-            )}
-          />
-          <Route
-            path="/defense"
-            render={() => (
-              <ScreenDefense
-                setDefenseParams={setDefenseParams}
-                fallbackCoverageTypes={fallbackCoverageTypes}
-              />
-            )}
-          />
-          <Route
-            path="/pokedex/help"
-            render={() => <ScreenPokedexHelp pokedexParams={pokedexParams} />}
-          />
-          <Route
-            path="/pokedex"
-            render={() => (
-              <ScreenPokedex
-                setPokedexParams={setPokedexParams}
-                allPokemon={AllPokemon}
-                isLoading={isLoading}
-              />
-            )}
-          />
-          <Route path="/info" component={ScreenInfo} />
-          <Redirect to="/defense" />
+          <HashRouter>
+            <Route
+              path="/offense/coverage"
+              render={() => (
+                <ScreenWeaknessCoverage
+                  setCoverageTypes={setCoverageTypes}
+                  offenseParams={offenseParams}
+                  fallbackCoverageTypes={fallbackCoverageTypes}
+                  isLoading={isLoading}
+                />
+              )}
+            />
+            <Route
+              path="/offense"
+              render={() => (
+                <ScreenOffense
+                  coverageTypes={coverageTypes}
+                  setCoverageTypes={setCoverageTypes}
+                  setOffenseParams={setOffenseParams}
+                  fallbackCoverageTypes={fallbackCoverageTypes}
+                  isLoading={isLoading}
+                />
+              )}
+            />
+            <Route
+              path="/defense"
+              render={() => (
+                <ScreenDefense
+                  setDefenseParams={setDefenseParams}
+                  fallbackCoverageTypes={fallbackCoverageTypes}
+                />
+              )}
+            />
+            <Route
+              path="/pokedex/help"
+              render={() => <ScreenPokedexHelp pokedexParams={pokedexParams} />}
+            />
+            <Route
+              path="/pokedex"
+              render={() => (
+                <ScreenPokedex
+                  setPokedexParams={setPokedexParams}
+                  allPokemon={AllPokemon}
+                  isLoading={isLoading}
+                />
+              )}
+            />
+            <Route path="/info" component={ScreenInfo} />
+            <Redirect to="/defense" />
+          </HashRouter>
         </Switch>
       </div>
     </div>

diff --git a/template/index-gh-pages.html b/template/index-gh-pages.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr" class="bg2">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Pokémon Type Calculator</title>
+    <meta name="og:title" content="Pokémon Type Calculator" />
+    <link rel="icon" sizes="16x16" href="pkmn.help/favicon-16.png" />
+    <link rel="icon" sizes="32x32" href="pkmn.help/favicon-32.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="pkmn.help/favicon-180.png" />
+    <link rel="manifest" href="pkmn.help/manifest.json" />
+    <meta name="og:image" content="pkmn.help/favicon-192.png" />
+    <meta
+      name="twitter:image"
+      content="pkmn.help/favicon-192.png"
+    />
+    <meta
+      name="twitter:image:src"
+      content="/favicon-192.png"
+    />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <meta
+      name="description"
+      content="A Pokémon type calculator to show strengths/weaknesses of different type combinations"
+    />
+    <meta
+      name="og:description"
+      content="A Pokémon type calculator to show strengths/weaknesses of different type combinations"
+    />
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:site" content="@wavebeem" />
+    <meta name="twitter:creator" content="@wavebeem" />
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>