Fix Refresh Issue

KhamessiTaha · Sep 12, 2024 · cd11f71 · cd11f71
1 parent 27514a9
commit cd11f71
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 4 deletions.
diff --git a/public/404.html b/public/404.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>Single Page Apps for GitHub Pages</title>
+ <script type="text/javascript">
+ // Single Page Apps for GitHub Pages
+ // MIT License
+ // https://github.com/rafgraph/spa-github-pages
+ // This script takes the current url and converts the path and query
+ // string into just a query string, and then redirects the browser
+ // to the new url with only a query string and hash fragment,
+ // e.g. https://www.foo.tld/one/two?a=b&c=d#qwe, becomes
+ // https://www.foo.tld/?/one/two&a=b~and~c=d#qwe
+ // Note: this 404.html file must be at least 512 bytes for it to work
+ // with Internet Explorer (it is currently > 512 bytes)
+
+ // If you're creating a Project Pages site and NOT using a custom domain,
+ // then set pathSegmentsToKeep to 1 (enterprise users may need to set it to > 1).
+ // This way the code will only replace the route part of the path, and not
+ // the real directory in which the app resides, for example:
+ // https://username.github.io/repo-name/one/two?a=b&c=d#qwe becomes
+ // https://username.github.io/repo-name/?/one/two&a=b~and~c=d#qwe
+ // Otherwise, leave pathSegmentsToKeep as 0.
+ var pathSegmentsToKeep = 1;
+
+ var l = window.location;
+ l.replace(
+ l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
+ l.pathname.split('/').slice(0, 1 + pathSegmentsToKeep).join('/') + '/?/' +
+ l.pathname.slice(1).split('/').slice(pathSegmentsToKeep).join('/').replace(/&/g, '~and~') +
+ (l.search ? '&' + l.search.slice(1).replace(/&/g, '~and~') : '') +
+ l.hash
+ );
+
+ </script>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/public/index.html b/public/index.html
@@ -10,7 +10,18 @@
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <title>Taha Khamessi Portfolio</title>
  <meta name="description" content="Self Developed personal website build with React.js">
-
+ <script type="text/javascript">
+ (function(l) {
+ if (l.search[1] === '/' ) {
+ var decoded = l.search.slice(1).split('&').map(function(s) { 
+ return s.replace(/~and~/g, '&')
+ }).join('?');
+ window.history.replaceState(null, null,
+ l.pathname.slice(0, -1) + decoded + l.hash
+ );
+ }
+ }(window.location))
+ </script>
 
 </head>
 

diff --git a/src/404.html b/src/404.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>Single Page Apps for GitHub Pages</title>
+ <script type="text/javascript">
+ // Single Page Apps for GitHub Pages
+ // MIT License
+ // https://github.com/rafgraph/spa-github-pages
+ // This script takes the current url and converts the path and query
+ // string into just a query string, and then redirects the browser
+ // to the new url with only a query string and hash fragment,
+ // e.g. https://www.foo.tld/one/two?a=b&c=d#qwe, becomes
+ // https://www.foo.tld/?/one/two&a=b~and~c=d#qwe
+ // Note: this 404.html file must be at least 512 bytes for it to work
+ // with Internet Explorer (it is currently > 512 bytes)
+
+ // If you're creating a Project Pages site and NOT using a custom domain,
+ // then set pathSegmentsToKeep to 1 (enterprise users may need to set it to > 1).
+ // This way the code will only replace the route part of the path, and not
+ // the real directory in which the app resides, for example:
+ // https://username.github.io/repo-name/one/two?a=b&c=d#qwe becomes
+ // https://username.github.io/repo-name/?/one/two&a=b~and~c=d#qwe
+ // Otherwise, leave pathSegmentsToKeep as 0.
+ var pathSegmentsToKeep = 1;
+
+ var l = window.location;
+ l.replace(
+ l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
+ l.pathname.split('/').slice(0, 1 + pathSegmentsToKeep).join('/') + '/?/' +
+ l.pathname.slice(1).split('/').slice(pathSegmentsToKeep).join('/').replace(/&/g, '~and~') +
+ (l.search ? '&' + l.search.slice(1).replace(/&/g, '~and~') : '') +
+ l.hash
+ );
+
+ </script>
+ </head>
+ <body>
+ </body>
+</html>
diff --git a/src/App.js b/src/App.js
@@ -28,7 +28,7 @@ function App() {
  }, []);
 
  return (
- <Router>
+ <Router basename="/taha-portfolio" >
  <Preloader load={load} />
  <div className="App" id={load ? "no-scroll" : "scroll"}>
  <Navbar />

diff --git a/src/components/Navbar.js b/src/components/Navbar.js
@@ -37,7 +37,7 @@ function NavBar() {
  className={navColour ? "sticky" : "navbar"}
  >
  <Container>
- <Navbar.Brand href="/home" className="d-flex">
+ <Navbar.Brand href="/taha-portfolio/" className="d-flex">
  <img src={logo} className="img-fluid logo" alt="brand" />
  </Navbar.Brand>
  <Navbar.Toggle
@@ -53,7 +53,7 @@ function NavBar() {
  <Navbar.Collapse id="responsive-navbar-nav">
  <Nav className="ms-auto" defaultActiveKey="#home">
  <Nav.Item>
- <Nav.Link as={Link} to="/" onClick={() => updateExpanded(false)}>
+ <Nav.Link as={Link} to="/Home" onClick={() => updateExpanded(false)}>
  <AiOutlineHome style={{ marginBottom: "2px" }} /> Home
  </Nav.Link>
  </Nav.Item>