(SPA) Routes rendered with map() function give blank page on refresh

Greetings!

My deployed website is an online store demo and it has similar-coded product pages (over 40). So, I rendered them with React Router through map() function:

When product pages get refreshed they show blank page.

Any changes on the page involving loading components (like switching to “Comments” tab) result to blank page as well.

Also it is the only pages unable to load any images (here it’s React-Slick slider and usual image as default avatar):

I didn’t find this problem in common issues, please help :pray:

Deployed here: https://hopeful-shirley-ffb643.netlify.com/
Repo: https://github.com/Alex-Noir/react_e-commerce_online_store

It looks like your src paths have a hardcoded period preceding it:
image

You’ll need to make sure your paths look like /static/media/* instead. In any case, this issue seems specific to your code, which is why you didn’t find a ‘common issues’ post about it. Hope that helps.

I got it about the period. In my package.json I wrote "homepage": ".", when I was solving issue with blank pages. Now I wrote

"homepage": "https://hopeful-shirley-ffb643.netlify.com",

images are loaded fine, thank you very much, but it doesn’t solve issue with refreshing. I think it’s because of dynamic paths in Router. It you’ll come across some solution, please, let me know.

is this helpful at all?

I already did this, but routes with params in path or just with dynamic path still give blank page on refresh. I have only one route with params:

Hi, @Noir, can you give us a specific URL to test which exhibits this behavior? Also, what are the steps needed to reproduce the issue? Reloading the page in the browser or is something else required?

Sure. Just refresh the page with any product out of 45. But, right now I am experimenting with my _redirects and depending what rule I wrote there some pages can give 404 (currently 1 and 4), some - “ERR_TOO_MANY_REDIRECTS” (currently 0, 3 and 8), some - blank page (all the rest):

Current _redirects:
https://github.com/Alex-Noir/react_e-commerce_online_store/blob/master/public/_redirects

To reproduce, you need go to any product page (their ids are listed from 0 to 44, they come at the end of URL) from any product list , for example moblie phones and refresh:
https://hopeful-shirley-ffb643.netlify.com/mobile-phones

In case if you need list of ids, here’s my data.js:

Hi, I’m not sure what you are trying to do. You have multiple redirects that redirect to itself, which will cause your issue. Also, you are using placeholders (:id) incorrectly. A placeholder needs to be in both the from and to parts in your rule.

That said, I recommend that you just remove all your redirects except the one for your SPA: /* /index.html 200. That should cover all the paths that your react-router handles.

I understood about : id.

I initially had only this one rule /* /index.html 200, sadly it didn’t work with dynamic paths, that’s why I am experimenting with other rules now.

I’ve used react-router’s route parameters (:id) without the need any additional redirects, so the redirect rules it likely not the issue.

Yes, I’m starting to think the same, too.

When I refresh the page, the console says:

TypeError: Cannot read property 'title' of undefined

title property comes from data[match.params.id] ( const { title, category } = data[match.params.id]), so I think it’s about params, which are getting lost after every re-render.

I need to figure out the way how to save params with every refresh, then it’ll work, I hope.

As the last test I rewrote route with params back to routes with map function, deployed and suddenly everything is refreshing normally! I created and reversed so many commits that I already forgot the initial differences. I am very very sorry for confusing everyone.

Though I understood the problem with params.

With every render I was creating the clone of data-array of objects in componentDidMount and set it to state in Context. This state was sent with props through route with params.

When you go to the page and refresh it, the component mounts faster than state managed to get calculated. Thus component doesn’t get props from Context, instead props.data = undefined, because the state dies with every refresh. So, render() is firing, but mount doesn’t happen. Params can influence this with refresh.
And, btw, the page becomes not blank, but it loads empty (I didn’t noticed it, because my background color is very close to white). render() -> not mount.

In this case the problem can be solved with 3 ways, as I see it:

  1. Setting state initially with reference to data-object (if it’s okay to change it), not with a copy.
  2. Use getDerivedStateFromProps
  3. Use local storage.

Big thank you to all people from support for being patient with me.