Deepika Sharma

Posted on Jul 5, 2021

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

#react #heroku #node #express

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

Top comments (26)

Ali Zulfaqar • Jul 5 '21

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...

Deepika Sharma • Jul 5 '21

Sure I'lltry this and let you know

Deepika Sharma • Jul 5 '21

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.

Ali Zulfaqar • Jul 5 '21 • 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'));
}

Deepika Sharma • Jul 5 '21

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.

Ali Zulfaqar • Jul 5 '21

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'));
  });
}

Deepika Sharma • Jul 5 '21 • Edited

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

Ali Zulfaqar • Jul 5 '21

Can you share the screenshot for the error ?

Deepika Sharma • Jul 5 '21

Shared in the above thread

Ali Zulfaqar • Jul 5 '21 • 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

Ali Zulfaqar • Jul 5 '21 • 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))}

Deepika Sharma • Jul 5 '21

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/

Ali Zulfaqar • Jul 5 '21 • 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

Deepika Sharma • Jul 5 '21 • Edited

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

Ali Zulfaqar • Jul 5 '21

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

Deepika Sharma • Jul 5 '21

Oh thankyou for you help.

Ali Zulfaqar • Jul 5 '21

Sorry that i could not help you solve your problem

Deepika Sharma • Jul 5 '21

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

Pratik sharma • Jul 5 '21 • 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'));
});

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!!!

Deepika Sharma • Jul 5 '21

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)