React Dynamic Pages Don't Work

My app link: https://lyricalplace.netlify.app/

I have build this test app, to see Netlify and understand more about deployment, as i am a newbie. Although i have some problems regarding some dynamicly rendered react-router-dom pages. Most of the pages, even the “My Profile” pages (which are also dynamicly rendered) work fine. But the /lyrics/:id pages don’t! My app is working fine on the development level and all roll smooth and nice.

Regarding /lyrics/:id, the pages should render an API call from the database. The funny thing is that form the search in my “/” root, links (kinda) work, but from direct click on the links don’t. I am very confused and struggled to find a solution.

If anyone can help me with some easy-to-follow steps that would be much appriciated!

Your files are returning errors:

Basically, your JS seems to be getting redirected to HTML.

Thanks for the heads up, but what can i do? Locally this seems to work fine… Pages load as they suppoed to, but on Netlify, i get this error. Any tips?

@kr1ss01 Did you get this resolved? I’m not seeing these errors when I visit your site.

Nop, errors still sadly exist. Clicking “Latest Uploads” and on the side-nav links is the error, or searching a song on the search bar and clicking on one of the results. These two are the errors. And I haven’t been able to fix them at all yet. I’m still very confused…

Are there any redirects that you’ve setup?

If you mean the “_redirects” file, yes. Inside it has this line:
/* /index.html 200
The above file is located in my /public folder & /build folder
And also i have a file, that I added later in my root folder called “netlify.toml
Inside this file I 've written:
[[redirects]]
from = “/*”
to = “/index.html”
status = 200
Both these files I saw in forums and said that it they might help…but got nothing :frowning:

You definitely don’t need these 3 files. Only the one in the public folder is required. Regardless, they’re all the same redirect rules so I’m not sure. Could you share the repo?

Yes of course. Here is my repository:
GitHub - kr1ss01/lyrical-place-front

Sorry for the delay. But the good news is, your issue is fixed. The problem is your package.json. You’ve "homepage": "./", which is why Reast is trying to load the JS from /lyrics/static/js... which obviously doesn’t exist. The files exist at /static/js/... which is relative to the root.

Thus, change your "homepage": "./", to "homepage": "/" (notice the removal of the dot). This seems to work: Lyrical Place

Repo here: GitHub - Hrishikesh-K/bug-free-lamp

2 Likes

I have the same issue in netlify.toml file I added a redirection rule
[[redirects]]
from = “/*”
to = “/.netlify/functions/next_404”
status = 404

after adding that … make static js files treated as invalid routes and then redirected to 404.

What’s your website address?

Thank you so much hrishikesh!
Now it works fine! Thanks again for your effort! Keep up the good work. :slight_smile: