Lift-off part 3 Odyssey course, stage 7. BUILDING THE TRACK PAGE, problem with the Router

At his stage, lot of things that are explained for adding in the sources are actually already here when checking out the repository.

Well.

My problem is that the Router seems to not work at all.

  • The only page I can display is http://localhost:3000/
  • When a try http://localhost:3000/track/c_0 I have a blank page (I mean: really blank, no headers…)
  • Even if I try to add a new route the home page (adding the line <Tracks path="/home" /> for example), the page is blak, only the root displays something, even if I remove the route from Router in index.js

So, I do not know what to do.

If it may help:

  • node --versionv14.17.1
  • npm --version7.19.1

Hi @azias!

Hmm, there are a couple things to check here:

  1. What do you have in your track.js file in the client/src/pages folder? The component in that file should be returning a <Layout> component. This will show the page layout with the header/footer and the Catstronauts logo at the top left.

  2. When adding a new route in index.js, make sure you are adding the following:

<Track path="/track/:trackId" />

This code means that the Track component will be displayed on the page when you navigate to http://localshost:3000/track/c_0, where c_0 is the trackId. I see in your post that you added Tracks (with an s), which will show the Tracks component-- that’s not what we want, so make sure you use the singular Track (no s).

Hope that helps, let me know if you’re still stuck!

Thanks you for your response.

I think all that you pointed is correct. However I I have nothing in the DOM under “root div” when I go to
…localshost:3000/track/c_0 (or any other url rather than …localshost:3000)

Maybe it could be simpler if you have access to my code: I have pushed the code with my modifications here: GitHub - azias/odyssey-lift-off-part3

Thanks for the link to your Github, that definitely helps!

I don’t see any new code in the client folder. Can you make sure to push those up?

In your first post, you mentioned “At his stage, lot of things that are explained for adding in the sources are actually already here when checking out the repository.”

I have a feeling you were looking at the final/client folder instead of the root client folder. You’ll need to add the code from the course in the root client folder if you’re running the application from there!

1 Like

oohh… that’s it

I was looking at the final subfolders… That’s why any modification did nothing.

Working on the correct folder solved all my problems!

Thank you

And thank you for the “odyssey”, this is definitively useful to discover Apollo. (I would have liked a part on subscription with a postgresql database and real time update of the GUI, but I suppose I will find it in the documentation)

1 Like

Glad to hear that! :grin:

Definitely leave us your feedback and any course suggestions in the course survey at the end!