GitHub Pages shows 404 error when navigating via `BrowserRouter`

[qnxdev]

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]

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

[israelmrios]

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( <React.StrictMode> <HashRouter> <App /> </HashRouter> </React.StrictMode>, document.getElementById('root') );

[gitname]

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