DEV Community

Deepika Sharma
Deepika Sharma

Posted on

Unable to navigate to pages in react (MERN app) which is deployed on Heroku

I am working on a MERN app and it is working fine in localhost. Yesterday I hosted it in heroku and the API , UI are working fine.

But I am unable to navigate between pages.

I already asked this question in stackoverflow but no one answered. I hope some of you can find a solution for this.

The whole question and the relevant links are in here.
Please help.

https://stackoverflow.com/q/68246950/13942764

Discussion (26)

Collapse
alizulfaqar profile image
Ali Zulfaqar

Hello, you can try referring to this video on how to deploy MERN with heroku. Hopefully it help you solve the problem you are facing
youtube.com/watch?v=71wSzpLyW9k&ab...

Collapse
deepikasharma5 profile image
Deepika Sharma Author

Sure I'lltry this and let you know

Collapse
deepikasharma5 profile image
Deepika Sharma Author

I think I did same as this video..but not working. If I add that app.get('*',(req,Res)) then I am getting mapping error.

Collapse
alizulfaqar profile image
Ali Zulfaqar • Edited

I think you are missing the build folder inside the client folder, perhaps you can try npm run build first and then redeploy it to heroku. Because your code is referring to build folder which is inside the client folder and i did not see build folder inside your client folder directory

if (process.env.NODE_ENV === 'production') {
  app.use(express.static('client/build'));
}
Enter fullscreen mode Exit fullscreen mode
Thread Thread
deepikasharma5 profile image
Deepika Sharma Author

No the buld folder is there. I just used .gitignore and added/build when pushing to GitHub. The app is running. Only think is I am able to see the home page and the API which is in home page.. I am unable to navigate to other pages.

Thread Thread
alizulfaqar profile image
Ali Zulfaqar

how about you add app.get("*") from my code

if (process.env.NODE_ENV === "production") {
  // Set static folder
  app.use(express.static("client/build"));

  app.get("*", (req, res) => {
    res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
  });
}
Enter fullscreen mode Exit fullscreen mode
Thread Thread
deepikasharma5 profile image
Deepika Sharma Author • Edited

If I add that I am getting mapping error.
dev-to-uploads.s3.amazonaws.com/up...

Thread Thread
alizulfaqar profile image
Ali Zulfaqar

Can you share the screenshot for the error ?

Thread Thread
deepikasharma5 profile image
Deepika Sharma Author

Shared in the above thread

Thread Thread
alizulfaqar profile image
Ali Zulfaqar • Edited

I've checked your code and i found there is 6 file that is using this.state.dates.map, based on the image you've shown most probably some of it is empty array which is why it gives error this.state.dates.map is not a function

Thread Thread
alizulfaqar profile image
Ali Zulfaqar • Edited

There is a quick fix for that, you just need to add like this. If this.state.dates.map is not an array or undefined, it will be replaced by empty array for the logic of this code

{(this.state.dates.map || []).map((item,index))}
Enter fullscreen mode Exit fullscreen mode
Thread Thread
deepikasharma5 profile image
Deepika Sharma Author

I don't think that works. And in my database the data is available. And I am able to render the map correctly in the home page. That means there is not issue in the API or map. I am just unable to navigate between the pages.

dev-to-uploads.s3.amazonaws.com/up...

Please check this link. This is my website home page. Other than the image everything is coming from API(mapping). All of them are working. But try to switch to another page using the navigation. That ismthe issue I am having.

af-global-2021.herokuapp.com/

Thread Thread
alizulfaqar profile image
Ali Zulfaqar • Edited

Sorry, i missed out the curly bracket. I've update my code, i've been using the code with no problem. Do try again , if it is not ok then there is other problem

Thread Thread
deepikasharma5 profile image
Deepika Sharma Author • Edited

Yes. I added with curly brackets in my code. But received that error

Thread Thread
alizulfaqar profile image
Ali Zulfaqar

oh if that's the case i'm not sure where to check anymore

Thread Thread
deepikasharma5 profile image
Deepika Sharma Author

Oh thankyou for you help.

Thread Thread
alizulfaqar profile image
Ali Zulfaqar

Sorry that i could not help you solve your problem

Thread Thread
deepikasharma5 profile image
Deepika Sharma Author

Ah that's fine. At lease you tried to help me :)

Collapse
pratiksharm profile image
Pratik sharma • Edited
if (process.env.NODE_ENV === 'production') {
  app.use(express.static('client/build'));
}
app.get('*', (request, response) => {
    response.sendFile(path.join(__dirname, 'client/build', 'index.html'));
});
Enter fullscreen mode Exit fullscreen mode

did you add this in your server ??

you can look here at the steps to do the same

github.com/accimeesterlin/mern-sta...

Hope it helps

Chill!!!

Collapse
deepikasharma5 profile image
Deepika Sharma Author

If you can , can you check whether my frontend mapping is correct? Because if I add the above code it is showing mapping error. But the code is completely working on local server.

And without the above code the home page and the mapping inside it are working fine. Only the navigation is not working.
(Actually I referred this person's YouTube video and deployed)

Collapse
deepikasharma5 profile image
Deepika Sharma Author

Yes when I add that I am getting the error as this.state.dates.map is not a function. (A mapping error)

Collapse
alifarhad profile image
Farhad Ali

I had the same issue. I fixed it the following way:

once you have built the react app with npm build command then you need to go to public directory and add a new file called:

_redirects

content of the file should be:

/* /index.html 200

you can check this in my repo:
github.com/ali-farhad/material-ui-...

Collapse
deepikasharma5 profile image
Deepika Sharma Author

That is aalo not working. Do I need to mention that file in somewhere?

Collapse
alifarhad profile image
Farhad Ali • Edited

no does not need to be mentioned anywhere. but again you have a MERN app. I had CRA app so that is why this solution might not apply to your project.

Thread Thread
deepikasharma5 profile image
Deepika Sharma Author

Oh may be that's the reason

Collapse
deepikasharma5 profile image
Deepika Sharma Author

Please someone help. I tried everything I can. Please give me some solutions.