Issue with QR Code URL Not Working in React JS and Flask Application

I have an application that utilizes both React JS and Flask. Flask is deployed on Render.com using a web service, React JS is deployed as a static site, and the database is PostgreSQL. All three components have been deployed successfully, and most pages are working fine, including inserting and retrieving information from the React JS frontend.

However, I’m encountering an issue with the following scenario: when I use the <Link> component like this—**<Link to="/menu-display/1" className="cta-button">Menu</Link>**—it works as expected.

But when I manually enter the URL in the browser or scan it using a phone (as part of a QR code functionality), such as https://myStaticweb.onrender.com/menu-display/1, it doesn’t work. The phone camera reads the URL and opens it in the browser, but the page doesn’t load.

I have ensured that the routing in app.js is correct. I’ve tried every possible solution, but I’m still unable to resolve the issue. I have spent a lot of time to fix it but no luck Could you please advise on what might be causing this problem?

Hi there,

Have you configured the URL rewrite for your React static site so client-side routing will work correctly? https://docs.render.com/deploy-create-react-app#using-client-side-routing.

Regards,

Keith
Render Support, UTC+10 :australia:

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.