'React app - 404 page not appearing when typing incorrect url manually post deployment on heroku

I successfully deployed my react app on heroku.com. I am able to navigate to pages only by clicking on the NavLinks that are available on the page.

Problem - the moment I enter anything manually in the url e.g. /contact or /product it does not work and gives the error "Cannot GET /Contact" or Cannot GET /product. Nor this is show the 404 page available in the app

                   <Suspense fallback={<Loader />}>
                        <Routes>
                            <Route path="/" exact element={<Home/>} />
                            <Route path="/*" element={<PageNotFound />} />
                        </Routes>
                    </Suspense>

I noticed the same issue for some users on netlify. however, the same fix for SPAs did not work with Heroku. please advise if there is any solution to this?

I tried this but did not get the expected results

"build": "react-scripts build && echo ‘/\* /index.html 200’ | cat \>build/\_redirects",
reactjsherokuhttp-status-code-404


Solution 1:[1]

If I understand your problem correct, you have two different options on fixing this.

The first and easiest is to use HashRouter instead of BrowserRouter. With this component a # is inserted in the urls so that the full url isn't sent to the server but instead managed by React.

The second option is to tell Heroku to let /index.html receive all requests, instead of trying to find /Contact when you request /Contact. I'm not familiar with Heroku so I don't know how to do this.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Anton

Related Questions