Personal webpage failed to deploy

JavaScript
1

The page runs fine on my localhost but will not run on netlify.

The main reason it is giving me is my switch statement needs a default case that I havent declared. I thought the first case was the default?

also my contact page is not loading? gives me a 404.

here is my repo

2
  • could you please share that snippet?
  • is every other page is rendered correctly on browser except that “contact page” ?

happy coding :slight_smile:

1 Like
3

thanks for your reply!!
so I don’t have my contact page rendering properly?

here is my switch statement that is giving the error in deploying.

Screen Shot 2023-11-19 at 6.31.20 AM
Screen Shot 2023-11-19 at 6.31.20 AM1862Ă—1654 408 KB

1 Like
4

Hello @woodumstead!

This freecodecamp article might help. Essentially, the default case is the catch all case since there is always a possibility that every eventuality may not have been considered - which means that it might prevent a crash.

Does this help?
Keep up the good progress!

Happy Coding! :slightly_smiling_face:

5

this does help thank you!

I got it to deploy but still doesn’t seem to want to load my contact page. it runs fine on my localhost but will not render live.

I switched the “switch” statement, here is that snippet.

Screen Shot 2023-11-19 at 6.59.17 AM
Screen Shot 2023-11-19 at 6.59.17 AM680Ă—742 61 KB

1 Like
6

There is nothing for the server to serve on the /contact route.

If you want components to be conditionally rendered you do not want URL navigation. Add a click handler to the links and make sure you preventDefault. Then create a state variable that is set to the event.target.pathname by the handler.

Example 
function App() {
  const [currentPath, setCurrentPath] = useState(window.location.pathname);

  const handleLink = (e) => {
    e.preventDefault();
    setCurrentPath(e.target.pathname);
  };

  return (
    <>
      <Navbar handleCurrentPath={handleLink} />
      {currentPath === "/" ? <Home /> : <Contact />}
	  { // footer code }
    </>
  );
}

export default App;

export default function Navbar({ handleCurrentPath }) {
  return (
    <nav className="nav">
      <a href="/" className="page-title" onClick={handleCurrentPath}>
        Woody Umstead
      </a>
      <ul>
        <li>
          <a id="contact" href="/contact" onClick={handleCurrentPath}>
            Contact
          </a>
        </li>
      </ul>
    </nav>
  );
}

If you do want actual routing I would suggest you install a router like react-router. Check the Netlify docs for SPA redirects on 404 (or use the hashrouter from react-router).

If you really do want to implement actual routing by yourself I would look at some examples. Here is a random article (didn’t really read it)

1 Like
7

Thank you @lasjorg

This is great information :pray:

1 Like