Next.js Discord

Discord Forum

Routing issue, following tutorial and pages aren't working (React and react-router-dom)

Unanswered
bobonlan posted this in #help-forum
Open in Discord
bobonlanOP
https://www.youtube.com/watch?v=SLfhMt5OUPI following along with this tutorial and implementing it into an existing project and I can't get the pages to show up. When I click on the buttons in the navbar it displays my error page I made and I can't figure out where my issue is.

4 Replies

bobonlanOP
I made it through the CSS section of the vid just fine, but the pages don't display once I got to the routing it without react router section.
export function App() {
  let Component;
  switch (window.location.pathname) {
    case "/":
      Component = <Balls />;
      break;
    case "/button1":
      Component = <Button1 />;
      break;
    case "/button2":
      Component = <Button2 />;
      break;
    case "/button3":
      Component = <Button3 />;
      break;
  }
  return (
    <>
      <Navbar />
      <Component />
    </>
  );
}
I'm assuming my issue lies somewhere in this chunk of code. I thought it was a problem with my paths but I've tried every combo of ./../ stuff and none of it worked (I tried using the./../ stuff logically and when it didn't work I tried to brute force it and still couldn't get it)
bobonlanOP
Fixed the routing issue, now it's an issue of my header shows up twice instead of once