React router github pages после перезагрузки страницы ошибка 404 - Ремонт и установка крупной бытовой техники

I built my website with React and React Router and it is hosted on Github Pages. When I refresh the site on a page that is not my home page OR do ctrl+click to open the page in a new tab, it leads to a 404 error. I know this is because Github pages doesn’t have access to front-end routes and one solution is to add a 404.html file that redirects back to your index.html.

I tried following the instructions on both

https://github.com/websemantics/gh-pages-spa
https://github.com/rafgraph/spa-github-pages

but neither worked for me. I think I am missing something but I can’t figure out what is going wrong as I’m not that familiar with React Router. Can anyone help? (Note: I know a solution is to use HashRouter but I don’t want my URLs to look ugly)

My code can be viewed on GitHub: https://github.com/christinexlin/portfolio

asked Aug 18, 2020 at 6:13

I’ve spent quite some time to fix this issue. The issue is that GitHub Pages doesn’t support single page apps, so there is a 404 error when refreshing page.

Check this out https://github.com/rafgraph/spa-github-pages and follow instructions, it is pretty straightforward. I’ve followed «basic instructions», but take a look at step 5 in «detailed instructions», that helped me fix it completely (adding repo name to absolute path of assets in index.html and setting segmentCount to 1).

Take a look at my code https://github.com/milosrancic/reactjs-website . I haven’t used HashRouter, I’ve used Switch. And also I’ve added 404.html file.

I hope this helps

answered Aug 19, 2020 at 17:53

I also have the same issue and waste a lot of time to fix it, but when I found that the solution is just on keywords i was surprised, so here is the solution:

goto your react project where you have defined your routes and replaced BrowserRouter with HashRouter.

In my case, I have defined routes in this way

Before Error Resolve

src/index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter} from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>
);

After Error Resolve

After Replacing BrowserRouter with HashRouter it works fine for me and the code after changes is like this:

src/index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { HashRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <HashRouter>
        <App />
    </HashRouter>
);

answered Aug 10, 2022 at 7:11

AbidullahAbidullah

1293 silver badges10 bronze badges

To get this to work, all I did was add a step to my GitHub Pages deploy pipeline that copies index.html to 404.html and then let my router handle the rest.

Note that this will still result in the routes returning a 404 status so SEO or CLI pings will think that requests failed.

answered Sep 24, 2021 at 1:56

derpedy-dooderpedy-doo

9861 gold badge16 silver badges21 bronze badges

One way you can try to fix this is by replacing Switch with HashRouter in your App.js . This will change your URLs, but it should fix your 404 issue for github pages. If you need a more in depth explanation of why this happens read this reply.

So your updated App.js should look like this:

import React, { Component } from "react";
import { HashRouter, Route } from "react-router-dom";
import Emoji from "react-emoji-render";
import "./App.css";
//Pages
import Projects from "./Projects.js";
import About from "./About.js";
import Critterpedia from "./Critterpedia.js";
import Bluenotes from "./Bluenotes.js";
import Formally from "./Formally.js";
//Components
import visualize from "./Images/visualize-actualize.png";
import ScrollToTop from "./ScrollToTop.js";

class App extends Component {
  render() {
    return (
      <div>
        <ScrollToTop />
        <HashRouter>
          <Route exact path="/" component={Projects} />
          <Route path="/about" component={About} />
          <Route path="/critterpedia" component={Critterpedia} />
          <Route path="/bluenotes" component={Bluenotes} />
          <Route path="/formally" component={Formally} />
        </HashRouter>

        <div className="footer">
          <div className="emoji">
            <Emoji text="💭" />
          </div>

          <div className="intro-icon">
            <div className="img-div">
              <img src={visualize} alt="visualize and actualize" />
            </div>
          </div>

          <div className="credit">
            <div className="footer-links">
              <a href="https://github.com/christinexlin">GitHub</a>
              <a href="https://www.linkedin.com/in/christine-lin-01/">
                LinkedIn
              </a>
              <a href="https://twitter.com/christinexlin">Twitter</a>
            </div>
            <p>
              Made with <Emoji text="🖤" />
              by Christine Lin
            </p>
          </div>
        </div>
      </div>
    );
  }
}

export default App;

Let me know if this works for you

answered Aug 18, 2020 at 8:51

Источник

When deploying a React.js website on Github Pages, sometimes you might face an issue with routing that results in a 404 error when you refresh the page. This is because Github Pages serves static files and doesn’t have the capability to handle client-side routing in a single page application. However, there are ways to work around this issue and make your React.js website work correctly with client-side routing on Github Pages.

Method 1: Use HashRouter

To fix the 404 error on refresh when deploying a ReactJS website with routing on GitHub Pages, you can use the HashRouter instead of the BrowserRouter. The HashRouter uses the URL hash to keep track of the current location, which avoids the 404 error on refresh. Here are the steps to implement this solution:

Install react-router-dom package:

npm install react-router-dom

Import HashRouter and Route components from react-router-dom:

import { HashRouter, Route } from 'react-router-dom';

Wrap your App component with HashRouter component:

<HashRouter>
  <App />
</HashRouter>

Use Route component to define your routes:

<Route exact path="/" component={Home} />
<Route path="/about" component={About} />

Use Link component from react-router-dom to navigate between routes:

import { Link } from 'react-router-dom';

<Link to="/">Home</Link>
<Link to="/about">About</Link>

Here is the complete example code:

import React from 'react';
import { HashRouter, Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <div>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav>

      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
    </div>
  );
}

function Home() {
  return <h2>Home</h2>;
}

function About() {
  return <h2>About</h2>;
}

function Root() {
  return (
    <HashRouter>
      <App />
    </HashRouter>
  );
}

export default Root;

In summary, by using HashRouter instead of BrowserRouter, you can avoid the 404 error on refresh when deploying a ReactJS website with routing on GitHub Pages.

Method 2: Configure your server to handle 404s and redirect to index.html

To fix the issue of getting a 404 error when refreshing a React website deployed on GitHub pages with routing, you can configure your server to handle 404s and redirect to index.html. Here are the steps to do it:

Create a 404.html file in the public folder of your React project.
Add the following code to the 404.html file:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Page Not Found</title>
  </head>
  <body>
    <script>
      window.location.href = '/';
    </script>
  </body>
</html>

Install the gh-pages package by running the following command:

npm install gh-pages --save-dev

Add the following properties to the package.json file:

{
  "homepage": "https://<your-github-username>.github.io/<your-repo-name>",
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build"
  }
}

Run the following command to deploy your React app to GitHub pages:

Now, when you refresh your React app on GitHub pages, you should no longer get a 404 error. Instead, the server will redirect to the index.html file and your app will load properly.

Note: Make sure to replace <your-github-username> and <your-repo-name> with your actual GitHub username and repository name in the homepage property of the package.json file.

Method 3: Implement the use of the History API

If you are deploying a Reactjs website on Github Pages with routing and you are experiencing a 404 error on refresh, you can fix it by implementing the use of the History API.

Here are the steps:

Install the history package by running npm install history in your terminal.
Import the createBrowserHistory function from the history package in your index.js file.

import { createBrowserHistory } from 'history';

Create a history object using the createBrowserHistory function and use it in your Router component.

const history = createBrowserHistory();

ReactDOM.render(
  <Router history={history}>
    <App />
  </Router>,
  document.getElementById('root')
);

Wrap your BrowserRouter component with a Router component and pass the history object as a prop.

import { Router } from 'react-router-dom';

const history = createBrowserHistory();

ReactDOM.render(
  <Router history={history}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Router>,
  document.getElementById('root')
);

In your package.json file, add a "homepage" field with the URL of your Github Pages website.

{
  "name": "my-app",
  "version": "0.1.0",
  "homepage": "https://myusername.github.io/my-app",
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

That’s it! With these steps, you have implemented the use of the History API to fix the 404 error on refresh when deploying a Reactjs website on Github Pages with routing.

Источник

On Azure set TLS version under TLS/SSL settings
On Cloudflare TLS Version settings
So your updated
should look like this:
Let me know if this works for you
Question:
I am using the github pages as web pages, I enforced https to make is secure and also configured my DNS on Cloudflare.

404 Error on refresh with SPA React Router app in GitHub Pages

Question:

I built my website with React and

React Router

and it is hosted on Github Pages. When I refresh the site on a page that is not my home page OR do ctrl+click to open the page in a new tab, it leads to a

404 error

. I know this is because Github pages doesn’t have access to front-end routes and one solution is to add a 404.html file that redirects back to your index.html.

I tried following the instructions on both

https://github.com/websemantics/gh-pages-spa
https://github.com/rafgraph/spa-github-pages

hashrouter

but I don’t want my URLs to look ****)

My code can be viewed on GitHub: https://github.com/christinexlin/portfolio

Solution 1:

Solution 2:

To get this to work, all I did was add a step to my GitHub Pages deploy pipeline that copies
index.html
to
404.html
and then let my router handle the rest.

Note that this will still result in the routes returning a 404 status so SEO or CLI pings will think that requests failed.

Solution 3:

One way you can try to fix this is by replacing
Switch
with
HashRouter
in your App.js . This will change your URLs, but it should fix your 404 issue for github pages. If you need a more in depth explanation of why this happens read this reply.

So your updated
App.js
should look like this:

import React, { Component } from "react";
import { HashRouter, Route } from "react-router-dom";
import Emoji from "react-emoji-render";
import "./App.css";
//Pages
import Projects from "./Projects.js";
import About from "./About.js";
import Critterpedia from "./Critterpedia.js";
import Bluenotes from "./Bluenotes.js";
import Formally from "./Formally.js";
//Components
import visualize from "./Images/visualize-actualize.png";
import ScrollToTop from "./ScrollToTop.js";
class App extends Component {
  render() {
    return (
      <div>
        <ScrollToTop />
        <HashRouter>
          <Route exact path="/" component={Projects} />
          <Route path="/about" component={About} />
          <Route path="/critterpedia" component={Critterpedia} />
          <Route path="/bluenotes" component={Bluenotes} />
          <Route path="/formally" component={Formally} />
        </HashRouter>
        <div className="footer">
          <div className="emoji">
            <Emoji text="💭" />
          </div>
          <div className="intro-icon">
            <div className="img-div">
              <img src={visualize} alt="visualize and actualize" />
            </div>
          </div>
          <div className="credit">
            <div className="footer-links">
              <a href="https://github.com/christinexlin">GitHub</a>
              <a href="https://www.linkedin.com/in/christine-lin-01/">
                LinkedIn
              </a>
              <a href="https://twitter.com/christinexlin">Twitter</a>
            </div>
            <p>
              Made with <Emoji text="🖤" />
              by Christine Lin
            </p>
          </div>
        </div>
      </div>
    );
  }
}
export default App;

Let me know if this works for you

Personal Access Token in Github not working, I have a private repository that I have a dependency on, using https://github.com in my package.json. I have ssh set up on my computer, also I have personal access token. Even though I provide my personal access token as the password it fails.

Github https pages are not working in Microsoft Edge and Internet Explorer

Question:

I am using the github pages as web pages, I enforced https to make is secure and also configured my DNS on Cloudflare. My webpages are working fine on google chrome but not working on Microsoft Edge and Internet Explorer.
Here is the screenshot with error.

http://prntscr.com/oqez7m

It gives the below error.

SEC7120: [CORS] The origin ‘ms-appx-web://microsoft.microsoftedge’ failed to allow a cross-origin font resource at ‘ms-appx-web:///assets/Fonts/BrowserMDL.ttf#Browser MDL2 Assets’.

CSS3119: No fonts available for @font-face rule

I have tried to enabled/disabled TLS/SSL settings on Cloudflare, even I disabled Always use HTTPS.

Here are the settings on Github.
http://prntscr.com/oqf2sf

Github pages with HTTPS should work on all browsers.

Solution 1:

It’s a CORS related issue. For testing purpose, try to modify some settings may help to fix the issue for IE and Edge browser.

(1) Make sure that

security level

for all the zones are similar in internet options.

(2) Try to go to path below.

Internet options -> Security tab -> Custom level -> Allow data sources
across domains

Enable that option.

Again try to make a test to see whether issue get fixed or not.

Solution 2:

I resolved this by setting the appropriate TLS version on Azure webapp and Cloudflare. On Cloudflare, it should be same or lower version.

On Azure

set TLS

version under TLS/SSL settings

On Cloudflare TLS Version settings

Linux — GitHub SSH access not working, Go to repo on github which you have cloned and wanna pull with. Under the code-download option copy SSH link. Enter following command in your terminal —> git remote set-url origin paste_SSH_link. Share. Improve this answer. edited Oct 15, 2020 at 17:40. answered Oct 15, 2020 at 15:03. wizard.

Why is the release-action on Github not working?

Question:

I’m using the github actions
release-action@v1
in my workflow, and it’s not generating artifacts after signing the app and building the apk and

app bundle

I created a tag before pushing to the repository, but the action is still not working.

I think it’s because am not passing a
commit
to the workflow.

What do I need to do there?

Error:

  with:
    artifacts: build/app/outputs/apk/release/*.apk,build/app/outputs/bundle/release/app-release.aab
    token: ***
    generateReleaseNotes: false
    omitBody: false
    omitBodyDuringUpdate: false
    omitName: false
    omitNameDuringUpdate: false
    omitPrereleaseDuringUpdate: false
    removeArtifacts: false
    replacesArtifacts: true
  env:
    KEY_JKS: ***
    KEY_PATH: key.jks
    KEY_PASSWORD: ***
    ALIAS_PASSWORD: ***
    JAVA_HOME: /opt/hostedtoolcache/Java_Adopt_jdk/12.0.2-10.1/x64
    FLUTTER_ROOT: /opt/hostedtoolcache/flutter/2.10.2-stable/x64
    PUB_CACHE: /opt/hostedtoolcache/flutter/2.10.2-stable/x64/.pub-cache
Error: Error undefined: No tag found in ref or input!

Workflow:

name: Flutter CICD # action name
on:
  push:
    branches:
      - master
    tags:
      - "v*"
  # push:git
  #   branches: [ android-stable ]
jobs:
  build: # job's na me
    runs-on: ubuntu-latest # container os
    env: # ADD environment variables 
      KEY_JKS: ${{ secrets.KEY_JKS }}
      KEY_PATH: "key.jks"
      KEY_PASSWORD: ${{ secrets.KEY_PASSWORD }}
      ALIAS_PASSWORD: ${{ secrets.ALIAS_PASSWORD }}
    steps:
      - uses: actions/checkout@v2 # cd to current dir
      - uses: actions/setup-java@v2
        with:
          distribution: 'adopt' # See 'Supported distributions' for available options
          java-version: '12.x'
      - name: Create key file
        run: echo $KEY_JKS | base64 -di > key.jks
      - uses: subosito/flutter-action@v1
        with:
          flutter-version: '2.10.2' # change accordingly
      - run: flutter pub get
      # Statically analyze the Dart code for any errors.
      # - run: flutter analyze
      # Check for any formatting issues in the code.
      # - run: flutter format --set-exit-if-changed .
      # - run: flutter test
      - run: flutter build apk --release --split-per-abi
      - run: flutter build appbundle
      - name: Create github artifact release # disable this to save storage
        uses: ncipollo/release-action@v1
        with:
          artifacts: "build/app/outputs/apk/release/*.apk,build/app/outputs/bundle/release/app-release.aab"
          token: ${{ secrets.GITHUB_TOKEN }} # this is automatically provided by github
          # commit: ${{!github!}}
      - name: Upload app bundle artifact
        uses: actions/upload-artifact@v2
        with:
          name: appbundle
          path: build/app/outputs/bundle/release/app-release.aab

Solution 1:

The action documentation states that:

You must provide a tag either via the action input or the git ref (i.e push / create a tag). If you do not provide a tag the action will fail.

Moreover, the tag input states:

tag: An optional tag for the release. If this is omitted the git ref will be used (if it is a tag).

Your issue is probably related to the
push
trigger you set in your workflow file, as it will not generate any git ref tag. And as you’re not using the

action tag

input, the action can’t identify the tag to use to generate the release.

You have 2 options here:

Remove the on push trigger. For the workflow, and consequently the action, only run if a tag is present.
Add the tag input to the action with the
artifacts
and the
token
inputs you’re already using.

Solution 2:

If you wish to use the

ncipollo/release-action@v1.10.0

action then just add
this to your workflow.

IGNORE THE TOKEN

push:
    ...
    tags:
      - "v*"
jobs:
  build:
    ...
    permissions:
      contents: write
   ...
  - name: Create Release
    uses: ncipollo/release-action@v1.10.0
   ....

Markdown — Github https pages are not working in, (1) Make sure that security level for all the zones are similar in internet options. (2) Try to go to path below. Internet options -> Security tab -> Custom level -> Allow data sources across domains Enable that option. Again try to make a test to see whether issue get fixed or not. Share answered Aug 9, 2019 at …

GIT SSH is not Working

Question:

I previously had the problem My Problem in stackoverflow Question and that is solved by the answer provided by our stackoverflow community member.

Now i tried to use ssh for cloning one of the protected repository in Windows 7, so first i created the public key using this url link .

everything is working for me as specified in the url after following the steps, except when i try to do the 4th step that is «$ ssh -T git@github.com» i got the following error

mohamed_hussain@18 ~/.ssh 
$ ssh -T -p 443 git@ssh.github.com 
ssh: ssh.github.com: no address associated with name

Please help me in connecting to the ssh to access the private repositories.

Solution:

You need to use for step 4:

ssh -T git@github.com

(not
ssh -T git@ssh.github.com
:
ssh.github.com
doesn’t exist)

If the error message persists:

check your internet connection
check your DNS setting
check GitHub status

(» A small percentage of repositories are currently unavailable while we perform maintenance.»)

It shouldn’t be an
~/.ssh/config
issue, since you are not using an

SCP syntax

Considering that the OP Mohamed Hussain are trying to ssh to a private server (and not github.com), the OP confirms:

the problem here is my network firewall is blocking the IP and port number 22.

GitHub Copilot Commands not working and showing error, This happens when you have failed to authenticate Copilot with Visual Studio Code. If you had a missed authentication flow the flow can be re-triggered by clicking the VSCode Notifications icon on the status bar and clicking on the Sign in to Github notification. If you have lost the authentication flow …

Источник

When I reload my app on a local server, everything is fine. But when I reload the page while hosting on gh-pages, I get a 404 error. It doesn’t do this on the home page, but it does on the other 2 pages. Does it have something to do with the fact that it is being hosted remotely? I’m a bit of a noob with React Router. Any help would be appreciated.Here is the relevant code and the link to my app below:

React Game App

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <Nav />
          <div className="container">
            <Switch>
              <Route exact path="/react-game-search" component={MainPage} />
              <Route path="/games" component={GameSearch} />
              <Route  path="/about" component={About} />}
              <Route  path="/details" component={GamesDetails} />}
            </Switch>
          </div>
        </div>
      </Router>
    );
  }
}

const Nav = () => {
  return (
    <div className="navbar">
      <div className="navbar-item">
        <NavLink
          exact to="/react-game-search/"
          activeClassName="selected"
          className="nav-link"
        >Home</NavLink>
      </div>
      <div className="navbar-item">
        <NavLink
           to="/games"
          activeClassName="selected"
          className="nav-link"
        >Games</NavLink>
      </div>
      <div className="navbar-item">
        <NavLink
           to="/about"
          activeClassName="selected"
          className="nav-link"
        >About</NavLink>
      </div>
    </div>
  );
}

class Game extends Component {

  addDefaultSrc = (ev) => {
    ev.target.src = errorIcon;
  }

  render() {
    const { icon, gameTitle, game } = this.props;
    return (
      <div className="game-box">
        <Link
          style={{ textDecoration: 'none' }}
          to={{
            pathname: "/details",
            state: { game }
          }}>
          <div className="game-content">
            <img className="game-icon" onError={this.addDefaultSrc} src={icon} alt="icon" />

            <p className="game-link"><strong>{gameTitle}</strong></p>

          </div>
        </Link>
      </div>
    );
  }

}

ReactDOM.render(<App />, document.getElementById('root'));

asked Nov 17, 2018 at 23:37

Источник

Hello guys ,

In this article we will explain you how to deploy react app with react routers on github pages.

Interesting thing about react-router is, it won’t work directly on github pages, so this article is published.

Initially we will create a react app with CRA tool by facebook and deploy it on github pages.

Follow below article to create react app and deploy it on github .(click on the post here)

Now lets see the result.

Here Instead of loading home page ,it shows blank.

This is because a fresh page load for a url like ‘test_repository/’, where ‘/’ is a frontend route, the GitHub Pages server returns null because it knows nothing of ‘/’

Let’s solve blank page problem

We need to add basename to router as shown below and point it to repository name

<Router basename="/test_repository"> //add basename
      <Switch>
        <Route path='/' exact component={Home} />
        <Route path='/about' component={About} />
        <Route path='/services' component={Services} />
        <Route path='/contact-us' component={Contact} />
      </Switch>
</Router>

Now let’s check the result.

another problem is if you try other URL like ‘/about’ this will show 404 page error.

Let’s solve 404 page error:

Add below two codes in your react app ,

1.Create 404.html under public folder:

<!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>

set pathSegmentsToKeep=0 if your using custom domain for github pages.

Now, add below script in index.html in the head section.

<script type="text/javascript">
      // Single Page Apps for GitHub Pages
      // MIT License
      // https://github.com/rafgraph/spa-github-pages
      // This script checks to see if a redirect is present in the query string,
      // converts it back into the correct url and adds it to the
      // browser's history using window.history.replaceState(...),
      // which won't cause the browser to attempt to load the new url.
      // When the single page app is loaded further down in this file,
      // the correct url will be waiting in the browser's history for
      // the single page app to route accordingly.
      (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>

Now Everything works fine…

Above code snippets are basically used to explain git where to redirect on particular URL.

Note:Above code snippets belong to https://github.com/rafgraph/spa-github-pages.

Hope this article helped you guys!!!
Drop a comment if it worked for u!!!

Источник