BrowserRouter is not compatible within a GitHub Pages deployment #36010
-
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 Is there a chance that make it work with BrowserRouter?? Reproduction Steps
Thanks |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 8 replies
-
///install git hubpages //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 //in scripts // ??? 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 /// + in the Routes path="/" need to be path="" **** add the url in the README.md file // 3. then push the origin /// 4.Last deploy it |
Beta Was this translation helpful? Give feedback.
-
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:
If your home page is in /my-repository, like in a specific repository, use the BrowserRouter like this:
And if you're using a custom route, like mysite.com/my-route, use the BrowserRouter like this:
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 Example with specific repository Example with custom 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.
To ensure that GitHub Pages returns to the homepage when a 404 error occurs, follow these additional steps:
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! |
Beta Was this translation helpful? Give feedback.
-
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:
***@***.***>
|
Beta Was this translation helpful? Give feedback.
///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…