Routing not working on github pages. How to fix?

L

Lokah2020-06-20 09:45:45

GitHub

Lokah, 2020-06-20 09:45:45

Everything works fine on localhost. The site is hosted on github pages and when the page is refreshed or if I manually enter the url, 404 site not found appears . How can I fix it?

<BrowserRouter>
    <Switch>
         <Route exact path="/event">
               <Link><Main /></Link>
         </Route>
         <Route path="/api/:id">
               <Description />
          </Route>
    </Switch>
</BrowserRouter>

Tried HashRouter instead of BrowserRouter but then nothing is displayed at all

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

T

twoone, 2020-06-20
@lokah

Routing of spa applications assumes that the server will send index.html of the launching application to any address, the routing of which will already render the page corresponding to the route. gh-pages can't do that because it hosts statics. To resolve the problem d at the root of your application, create a file called 404.html and place the following code in it -

<!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
        // https://github.com/rafrex/spa-github-pages
        // Copyright (c) 2016 Rafael Pedicini, licensed under the MIT License
        // ----------------------------------------------------------------------
        // 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. http://www.foo.tld/one/two?a=b&c=d#qwe, becomes
        // http://www.foo.tld/?p=/one/two&q=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 segmentCount 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/?p=/one/two&q=a=b~and~c=d#qwe
        // Otherwise, leave segmentCount as 0.
        var segmentCount = 1;
        var l = window.location;
        l.replace(
            l.protocol + '//' + l.hostname + ( l.port ? ':' + l.port : '' ) +
            l.pathname.split( '/' ).slice( 0, 1 + segmentCount ).join( '/' ) + '/?p=/' +
            l.pathname.slice( 1 ).split( '/' ).slice( segmentCount ).join( '/' ).replace( /&/g, '~and~' ) +
            ( l.search ? '&q=' + l.search.slice( 1 ).replace( /&/g, '~and~' ) : '' ) +
            l.hash
        );
    </script>
</head>
<body>
</body>
</html>

Also, remember that in the absence of a domain, all internal links (links/images, etc.) must include the name of your repository.

F

fedosnew, 2021-03-01
@fedosnew

If still relevant, then you need to change BrowserRouter to HashRouter.
Here's a man wrecking the same issue
https://dev.to/zenulabidin/how-not-to-deploy-a-rea...