search

gitname / react-gh-pages

Deploying a React App (created using create-react-app) to GitHub Pages
6.58k stars 919 forks source link

GitHub Pages shows 404 error when navigating via `BrowserRouter` #40

Open qnxdev opened 4 years ago

qnxdev commented 4 years ago

I have been using react app with gh pages using HashRouter. Now I updated to Browserrouter.

Now the inital load everything is fine but reloading in and internal link returns Page not found Some innner pages alse return page not found

suppose

site.com/about/me will show if I go there from site.com/ but on reload t shows page not found

check https://qnxdev.github.io/vjcbuild/

catherineisonline commented 2 years ago

Having the same issue for a while, found any solution yet? :))

israelmrios commented 2 years ago

I had a similar issue, and found it was the way I was Handling my Routing. I was using <BrowserRouter> on my root index.js file but GitHub Pages does not support browser history like your browser does. I switched my routing to <HashRouter> this type of router uses the hash portion of the URL to keep the UI in sync with the URL.

`ReactDOM.render(

, document.getElementById('root') );`
gitname commented 2 years ago

Hi @qnxdev, sorry about the long wait.

In case you are still facing this issue, you may want to employ one of the two workarounds I listed in https://github.com/gitname/react-gh-pages/issues/104#issuecomment-1203373499. One is to, as @israelmrios mentioned, switch back to <HashRouter>. The other involves continuing to use <BrowserRouter>, but only after employing the "trick" described here: https://github.com/rafgraph/spa-github-pages.

You can learn more about the situation by reading the "Notes on client-side routing" section of the Create React Apps documentation: https://create-react-app.dev/docs/deployment/#notes-on-client-side-routing