React router does not work after deployed my fullstack applaction

1

I have a full-stack app built with React and Express. When I run the app locally, it seems the routing is fine but after deploying it the navigation seems to be broken, I am not able to go to any page unless I manually refresh it!! I tried almost all StackOverflow suggestions but had no luck.
this how express serves the static file:
` app.use(express.static(path.join(parentDir, ‘/client/build’)));

app.get(‘*’, (req, res) =>
res.sendFile(path.resolve(parentDir, ‘client’, ‘build’, ‘index.html’))
);`
Any help would be really appreciated…

2

Hey,

These are the symptoms of not setting up rewrites correctly for static sites, you’ll need every request coming in to go through your client-side router first, so it can then dispatch the request to the appropriate page/component.

See https://docs.render.com/deploy-create-react-app#using-client-side-routing for more explanation.

Jérémy.
Render Support, UTC+3

3

Hi Jeremy, Thank you for your reply! but my app is not a static site therefore there is no rewrites tap in my dashboard :thinking:

4

Hey,

Sorry about the confusion—I thought this was an issue with a static site. If you’re seeing a ‘Not Found’ error, it’s almost certainly related to how your application is configured.

Can you double-check if ‘path.resolve(parentDir, ‘client’, ‘build’, ‘index.html’)’ is pointing to the correct path? What does the structure of your project look like?

Jérémy.
Render Support, UTC+3