BrowserRouter is not compatible within a GitHub Pages deployment

[JuliaMersing]

Hi,

BrowserRouter is not compatible out-of-the-box within a GitHub Pages deployment and is expected to result in 404s - so using HashRouter is the best alternative. The problem is that with HashRouter, is not possible to navigate to other paths. I have read lot of comments about this issue in StackOverflow and non of the solution that I've read works.

Also, a couple of link in StackOverflow whit other developers with the same problem:

https://stackoverflow.com/questions/70201039/github-pages-hashrouter-not-displaying-components
https://stackoverflow.com/questions/72815638/react-router-dom-v6-hashrouter-basename-not-working
https://stackoverflow.com/questions/73330315/why-is-hashrouter-not-working-when-browserrouter-works

Is there a chance that make it work with BrowserRouter??

Reproduction Steps

• Use HashRouter
• Other paths don't work in local
• Other paths don't work in GithubPages

Thanks

[ghost]

///install git hubpages
$ npm install --save gh-pages

//Add some properties to the app’s package.json file. At the ***top level, add a homepage property. Define its value to be the string http://{username}.github.io/{repo-name}, where {username} is your GitHub username, and {repo-name} is the name of the GitHub repository (my-app) you created in step 3.

//expmle
"homepage": "http://.github.io/",

//in scripts
"scripts": {
//...
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
//...
"build": "react-scripts build && cp build/index.html build/404.html", // this will prevent page reloads to give a 404 error
}

// ??? if you are using the Router from react-router-dom then you need to change the Browser router tags to

// u need to wrap the base name in `` for some reason that doesn't work here
< BrowserRouter basename={ /${process.env.PUBLIC_URL}}>
< app/>
< /BrowserRouter>

/// + in the Routes path="/" need to be path=""
< Routes>
< Route path="" element={} />
< /Routes>

**** add the url in the README.md file
// 1. add the changes
$ npm add .
// 2. commit the changes
$ npm commit -m master

// 3. then push the origin
$ npm push origin

/// 4.Last deploy it
$ npm run deploy

[derekantrican]

I wasn't able to get this to work. I think the only valid workarounds are using HashRouter or BrowserRouter with a custom 404 page like @geanrt mentioned below.

[mayankpruthii]

Amazingggg, works good. Can't believe I spent 2 days searching for a workaround,while could have been a simple copy paste for 404.html in the build command.
Kudos!!!

[alex-cavaliere]

You're the best! I had the same problem. Thanks!

[Kellen-Stuart]

Worked like a charm

[derekantrican]

@LiteBrite82 This is only a hacky workaround - not native support. A "custom 404.html" page does work, but many browsers still show a "that page is missing" banner like this:

This should not be marked as an answer

[geanrt]

How it worked for me:

If you want to host your app on GitHub Pages and are using a custom domain or a specific repository, follow the steps below:

Configuration in the project's root file (eg main.jsx)

To host the app on GitHub Pages, you need to use the BrowserRouter from the react-router-dom package in the project's root file. If your home page is in the / route, you can use BrowserRouter as follows:

<BrowserRouter basename={"/"}>
    <App />
</BrowserRouter>

If your home page is in /my-repository, like in a specific repository, use the BrowserRouter like this:

 <BrowserRouter basename={"/my-repository"}>
    <App />
</BrowserRouter>

And if you're using a custom route, like mysite.com/my-route, use the BrowserRouter like this:

<BrowserRouter basename={"/my-route"}>
   <App />
</BrowserRouter>

Configuration in package.json file

In the package.json file, set the "homepage" property to the URL of the custom domain or specific repository where you plan to host your app on GitHub Pages.

Example with custom domain
"homepage": "https://[WEBSITE]"

Example with specific repository
"homepage": "https://[NAME].github.io/my-repository"

Example with custom route
"homepage": "https://[WEBSITE]/my-route"

Configuration in the Vite configuration file (vite.config.js)

If you are using Vite as the project generator, add the base command line: "./" in the vite.config.js configuration file. This will ensure that all files are loaded from the project root directory during application development and build.

export default defineConfig({
     plugins: [react()],
     base: "./"
});

To ensure that GitHub Pages returns to the homepage when a 404 error occurs, follow these additional steps:

1. After building the Vite application using the "npm run build" command, the content will be generated in the "dist" folder.

2. Create a separate "404.html" file in the "dist" directory with the same content as "index.html".

3. Now rename this "dist" folder to "docs" and upload it (containing the original "index.html" file and the custom "404.html" file and other files) to the GitHub repository.

4. On GitHub, go to your repository settings, click on the "Pages" tab and set the appropriate branch (typically "main: /docs") to serve GitHub Pages. Be sure to select the "docs" directory as the root folder to serve.

After following these steps, you're ready to deploy your React app to GitHub Pages according to the custom domain or specific repository you've set up. Good luck with the development and deployment of your project!

With these settings correctly applied, your React app will be ready to be hosted on GitHub Pages using the custom domain or specific repository you configured. Check that the BrowserRouter's basename matches the homepage setting in the package.json file. Also, make sure the vite.config.js file contains the base configuration: "./" to ensure the files are loaded correctly.

After following these steps, you're ready to deploy your React app to GitHub Pages according to the custom domain or specific repository you've set up. Good luck with the development and deployment of your project!

[derekantrican]

Here's a repo demonstrating basically the same thing: https://github.com/rafgraph/spa-github-pages

However, my browser (Brave) and potentially others show a "404 banner" even though the page "resolves". So while this works, it's definitely a hacky workaround

[alex-cavaliere]

I'm glad it was helpful Il giorno lun 8 apr 2024 alle ore 16:34 Kellen Stuart < ***@***.***> ha scritto:

…

Worked like a charm — Reply to this email directly, view it on GitHub <#36010 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AUGCL3WGGPZE5MUWUTDBIYTY4KTIVAVCNFSM6AAAAAAREDNK26VHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TANBXGIYTM> . You are receiving this because you commented.Message ID: ***@***.***>