search

stepzen-dev / stepzen-nuxt

2 stars 7 forks source link

Use dynamic routes to create a separate page for each mountain #4

Closed ajcwebdev closed 2 years ago

ajcwebdev commented 3 years ago

Sometimes it is not possible to know the name of the route such as when we make a call to an API to get a list of users, blog posts, or in this case mountains. These are called dynamic routes.

annetawamono commented 3 years ago

I can take this issue too 😊

ajcwebdev commented 3 years ago

Sounds good!

annetawamono commented 3 years ago

Hi @ajcwebdev I'm running into an issue that I can't figure out. There's an issue in the main branch where if you refresh the mountains list using the refresh button that was commented out on NuxtMountains.vue: Selection_071 It returns an error in the console:

NuxtMountains.vue?61c2:31 POST http://localhost:3000/undefined 404 (Not Found)
Error in fetch(): SyntaxError: Unexpected token < in JSON at position 0

This also happens on the branch I'm working on and it causes the same error when I try to go back to the index page from a mountain page. I have finished creating the dyanmic routes, but this issue messes with the flow of navigation.

Any assistance is appreciated 😊 👍🏾

ajcwebdev commented 3 years ago

Yeah, good question, I believe the Refresh button is commented out because I never got it working in the first place so that makes sense. The mountains are already being displayed in an unordered list and each list item will have a link to its own page, so we should be able to remove the refresh button entirely without disturbing anything else. It will look similar to this other example I did with the Dad Jokes API.

I just pushed some changes and removed the code entirely. Let me know if you can get it working with the current version on main. I also renamed the environment variables because they were using our naming convention for React apps so make sure to create a new .env file with the variables specified in the current .env.sample file.

Hope that all makes sense, let me know if you need any further clarification or if you're still having issues with the dynamic routes.