GitHub Pages shows 404 error when navigating to other routes

[Sarika4497]

I created my portfolio website but when I click on home or about me or skills or contact ...every time I found the error like

How I solve this problem

[T-Damer]

Looks like it's problem with build command, it creates index.html for main page only and javascript can not load new page. Problem is in index.html for every page, or in javascript files. I have the same issue, searched many time, nothing works.

In your condition I can see, that route is github.io/#home, but it must be github.io/myreactportfolio/#home, check <Router> component, routes must be <Route to='myreactportfolio/home component={Home} /> for example

[catherineisonline]

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

[DarkMG73]

Likewise, I have encountered the same issue. I'll post back if I figure it out.

[DarkMG73]

Found the problem: capital letters in the repo name. I change the repo name to the same name, but with all lowercase letters (including the Homepage url in the package.json) and re-deployed. No 404 now. I get a white screen, which is a different problem, but the 404 is gone.

[catherineisonline]

Found the problem: capital letters in the repo name. I change the repo name to the same name, but with all lowercase letters (including the Homepage url in the package.json) and re-deployed. No 404 now. I get a white screen, which is a different problem, but the 404 is gone.

I have everything in lowercase, however it doesn't help

[Teut2711]

Use some other hosting site like firebase

…

On Wed, 20 Apr 2022, 15:40 Ekaterine (Catherine) Mitagvaria, < ***@***.***> wrote: Found the problem: capital letters in the repo name. I change the repo name to the same name, but with all lowercase letters (including the Homepage url in the package.json) and re-deployed. No 404 now. I get a white screen, which is a different problem, but the 404 is gone. I have everything in lowercase, however it doesn't help — Reply to this email directly, view it on GitHub <#63 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AJVVIWS43WP4QTOPIRMQM2DVF7JZ7ANCNFSM5AVCM6ZQ> . You are receiving this because you commented.Message ID: ***@***.***>

[israelmrios]

I had the same 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 everyone, sorry about the long wait.

In case you are still getting an HTTP 404 error page when you navigate to other URLs within your app, you may be running into a limitation of GitHub Pages, which is described here, in the official CRA deployment guide: https://create-react-app.dev/docs/deployment/#notes-on-client-side-routing

Also described in that guide are two available workarounds, one of which @israelmrios described above. I recently paraphrased the same two workarounds in the following issue comment: #104 (comment)