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):
It looks like your src paths have a hardcoded period preceding it:
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.
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.
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):
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:
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.
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:
Setting state initially with reference to data-object (if it’s okay to change it), not with a copy.