Routing is broken in GitHub Pages environments

[Jeremy Kahn]

Per this report, it appears that room links are broken in GitHub Pages environments.

Per the Create React App docs, the likely solution is to set an appropriate BrowserRouter basename.

[Jeremy Kahn]

This is working better, but GitHub Pages environments still don't work with room links in WebKit browsers. They result in broken room URLs like the one here: #167 (comment)

The code here needs to be revisited to address this:

chitchatter/public/404.html

Lines 7 to 48 in 667c0b6

 // See: https://github.com/rafgraph/spa-github-pages/blob/gh-pages/404.html 
  
 // 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 = 0 
  
 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 
 ) 

[ralphshinevar]

I am not a javascript expert by any means. I was looking at some 404.html examples and this is different than yours:

Yours: var pathSegmentsToKeep = 0

Another: var pathSegmentsToKeep = 1;

What does the 1 over 0 do? Do you need a semi-colon? ;

[ralphshinevar]

Adding the ; var pathSegmentsToKeep = 0; does not change the outcome.

[ralphshinevar]

// 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).

Are we using a custom domain? If not change to "l"?

[Jeremy Kahn]

@ralphshinevar if you'd like try an immediate fix for your fork, try changing this line: https://github.com/ralphshinevar/chitchatter/blob/e63632c0c3827980f8e8d62726ab8e30c7f8789a/public/404.html#L27

Change the 0 to 1 and commit the file (in your main branch). That should trigger a new deployment.

[ralphshinevar]

Jeremy. The change to 1 apparently works. I was able to get in from my laptop and my phone! How about that? I fixed the javascript. I always say "necessity is the mother of invention."

[ralphshinevar]

Let's see if my testers (friends) can get in.

[ralphshinevar]

They seem to be busy. I guess I will go and mow the lawn. Try them later.

[Jeremy Kahn]

@ralphshinevar this should now be fully fixed. Try syncing your main branch with mine to get up to date.