Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Space tourism multi-page website

@Manojgupta103

Desktop design screenshot for the Space tourism multi-page website coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Community feedback

@krushnasinnarkar

Posted

Hi @Manojgupta103,

Congratulations on successfully completing the challenge!

Your solution looks nice, though there are a couple of things you can improve which I hope will be helpful:

When checking your submission, I noticed that when routing to any page and then reloading it, a "Page Not Found" error occurs. This issue is common with single-page applications (SPAs) hosted on Netlify. The problem arises because Netlify needs to be configured to serve the index.html file for all routes not explicitly found.

Here’s how to fix it:

Create a _redirects File:

  • In the public directory of your React app, create a file named _redirects. Ensure that both the index.html and _redirects files are in the same folder.

Add Redirect Rules:

  • In the _redirects file, add the following rule:
    /*    /index.html   200
    
    This rule tells Netlify to serve index.html for all paths, allowing React Router (or any client-side routing solution) to handle the routing correctly.

Deploy Changes:

  • After adding the _redirects file, deploy your app to Netlify again. This will ensure that refreshing or navigating directly to any route does not result in a 404 error.

I hope you find this helpful, and I would greatly appreciate it if you could mark my comment as helpful if it was.

Feel free to reach out if you have more questions or need further assistance.

Happy coding!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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