Dynamic path on Render deployment are not working

1

My route is something like below
/live/[:id]
Example:
/live/1234234
/live/333333
/live/23546757

This route keeps on changing based on some id
Now, locally this works, but when pushed into deployment on render. I get error 404 not found.
How do I implement this dynamic routing.

2

Hi,

It sounds like you may be referring to client-side routing, e.g. React Router.

If deployed to a Static Site, that requires a rewrite rule, as covered in our React guide: https://docs.render.com/deploy-create-react-app#using-client-side-routing

If you’re using a Web Service, you would need to implement that rewrite behavior in your code.

3

I am using static site and trying to render dynamic pages using React router.
Here is the folder structure: chesslive365/src at main · AshishGusain17/chesslive365 · GitHub
My main file is index.js and from there App.js is called.
Do you want me to convert all the routes into index.html and use rewrite to make that work?

4

If you’re using a Static Site, I suspect your build command is already generating the index.html for you. You shouldn’t need to change your code. It should just require adding the rewrite rule on the Static Site, as covered in the React guide shared above.

5

So I added index.html in rewrite but still all the links shows 404 not found

Here, is the deployed website: https://chesslive365.onrender.com. Home page opens up correctly. Now if you click on challenge a friend link and refresh the page the url redirects the link as below:

https://chesslive365.onrender.com/live/1234546 to https://chesslive365.onrender.com/live/index.html

6

If you still referring to https://chesslive365.onrender.com/ it looks like you’ve set it as a “redirect”, it should be a “rewrite”.

7

rewrite rull works.
It works and opens the correct link but if I refresh the page, I get an empty page
for any game link: https://chesslive365.onrender.com/live/1234546

8

If you’ve got client-side routing working, that would now point to a code issue. You’ll need to check your routes.

1 Like
9

I added few more routes like below, but all of them just shows blank page, locally all of them works

          <Switch>
            <Route exact path="/">
              home path '/'
              <Home alertCall={alertCall} nullifyAlert={nullifyAlert} />
            </Route>
            
            <Route path="/live">
              live path /live
              <Live alertObj={alertObj} alertCall={alertCall} nullifyAlert={nullifyAlert} />
            </Route>
            <Route exact path="/test">
              exact test path /test
            </Route>
            <Route path="/test2">
              test path /test2
            </Route>
          </Switch>
10

Debugging code is beyond the scope of our support. Maybe other community members will be able to help with more specific suggestions.

Some common Node project things to check:

  • The Static Site is as close to what you’re using locally, e.g. Node version, same package manager, etc.
  • Try a manual deploy with a clear build cache
  • Check browser dev tools for any issues, console tab, network tab, etc.
11

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.