#113: Fix sub-routes navigation for GitHub page deployments using gh-…

…pages
soumyajit4419 · Jun 6, 2023 · 0d524f0 · 0d524f0
1 parent 5e749e5
commit 0d524f0
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -64,6 +64,13 @@ Runs the app in the development mode.\
 Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 The page will reload if you make edits.
 
+## 🚀 To deploy using gh-pages module on GitHub page run the following command.
+
+1. In package.json update ``"homepage": "<YOUR GITHUB PAGE URL>/#"`` by replacing <YOUR GITHUB PAGE URL> with your GitHub page url.
+2. ``npm run deploy``
+3. Go to settings -> pages -> build and deployment -> choose ``gh-pages`` as root branch
+
+
 ## Usage Instructions
 
 Open the project folder and Navigate to `/src/components/`. <br/>

diff --git a/package.json b/package.json
@@ -1,5 +1,6 @@
 {
  "name": "portfolio",
+ "homepage": "<YOUR GITHUB PAGE URL>/#",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
@@ -23,6 +24,8 @@
  "web-vitals": "^2.1.4"
  },
  "scripts": {
+ "predeploy": "npm run build",
+ "deploy": "gh-pages -d build",
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",

diff --git a/src/App.js b/src/App.js
@@ -7,10 +7,10 @@ import Projects from "./components/Projects/Projects";
 import Footer from "./components/Footer";
 import Resume from "./components/Resume/ResumeNew";
 import {
- BrowserRouter as Router,
  Route,
  Routes,
- Navigate
+ Navigate,
+ HashRouter,
 } from "react-router-dom";
 import ScrollToTop from "./components/ScrollToTop";
 import "./style.css";
@@ -29,21 +29,21 @@ function App() {
  }, []);
 
  return (
- <Router>
- <Preloader load={load} />
- <div className="App" id={load ? "no-scroll" : "scroll"}>
- <Navbar />
- <ScrollToTop />
- <Routes>
- <Route path="/" element={<Home />} />
- <Route path="/project" element={<Projects />} />
- <Route path="/about" element={<About />} />
- <Route path="/resume" element={<Resume />} />
- <Route path="*" element={<Navigate to="/"/>} />
- </Routes>
- <Footer />
- </div>
- </Router>
+  <HashRouter>
+  <Preloader load={load} />
+  <div className="App" id={load ? "no-scroll" : "scroll"}>
+  <Navbar />
+  <ScrollToTop />
+  <Routes>
+  <Route path="/" element={<Home />} />
+  <Route path="/project" element={<Projects />} />
+  <Route path="/about" element={<About />} />
+  <Route path="/resume" element={<Resume />} />
+  <Route path="*" element={<Navigate to="/"/>} />
+  </Routes>
+  <Footer />
+  </div>
+  </HashRouter>
  );
 }