Skip to content
Submitted over 2 years ago

Responsive App w/ React, React Router, and CSS Modules

Thomas Kressman•110
@tkressma
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Devjobs web app
  • HTML
  • CSS
  • JS
4advanced

Design comparison

SolutionDesign

Solution retrospective

Hello everyone! This was an awesome challenge.

I ran into an issue using React Router. For each job posting, there is a route that takes you to the URL "/job/:id", which works great. So, if you click on the job with the ID of 2, it will route to .../job/2. However, the issue comes into play when you refresh the page.

Since App.js does not load upon refreshing the /jobs/:id page, the JSON data does not get passed down to the page, so the page does not render. I have tried many times to resolve this issue, and I think the best solution would be to having an actual API. In such a case, I would be able to request the job data each time the job details page loads using the useParams hook.

Any thoughts on this issue and/or my potential solution proposal? Thanks.

Community feedback

  • Danilo Blas•6,300
    @Sdann26Posted over 2 years ago

    I really like your solution. It is very nice.

    1
    Thomas Kressman•110
    @tkressmaPosted over 2 years ago

    @Sdann26 Thank you! I tried to get the implementation as close to the design as possible.

    1
  • Sourav Paul•0
    @im-paul-mak33Posted about 2 years ago

    Use React Query to fetch the data and use " refetchonWindowFocus " property and set it to true in React Query. Your issue will be most probably solved.

    0
  • optimusprime202•1,200
    @optimusprime202Posted over 2 years ago

    Hey @tkressma, Keep up the good work.

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord