React Dynamic Pages Don't Work

Support
,
1

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!

2

Your files are returning errors:

image
image814×100 5 KB

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

3

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?

4

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

5

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…

6

Are there any redirects that you’ve setup?

7

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:

8

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?

9

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

10

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: https://epic-mestorf-ee595b.netlify.app/lyrics/609461793164b62d8c99118c

Repo here: https://github.com/Hrishikesh-K/bug-free-lamp

2 Likes
11

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.

12

What’s your website address?

13

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

14

I am having same issue. When I try to redirect to dynamic page it throws error 404. what should I do? I checked my package.json file but it doesnt have homepage: “/”

15

Hi pranay9831, glad you found us :wave:t6: before we can help you, we need a little more information on the issues you are facing.

First, have you looked through this resource? It is a compilation of all of our build and deploy resources. This is a good starting point.

If you have worked through those guides and are still encountering issues please share the following information:

  • the name of your build instance: “example-jones.netlify.com”
  • what you have already tried
  • any error messages you have received in your terminal window or in the developer console