how do i switch between two components on the same page?

Create a Header component separately and import it in both places(Login and signup) components.

Example

Header.js

export default function Header() {
  return (
    <div style={{ display: "flex", justifyContent: "space-evenly" }}>
    <Link to="/">
      <h1>Login</h1>
    </Link>

    <Link to="/sign-up">
      <h1>Sign Up</h1>
    </Link>
  </div>
  )
}

Now import it in Login and signup components

Login.js

<div style={{ display: "flex", flexDirection: "column" }}>
     <Header />

      <form
        style={{ display: "flex", flexDirection: "column", padding: "40px" }}
      >
        <input type="email" placeholder="email"></input>
        <input type="password" placeholder="password"></input>
      </form>
    </div>

SignUp.js

<div>
     <Header />
      <form
        style={{ display: "flex", flexDirection: "column", padding: "40px" }}
      >
        <input type="name" placeholder="Name"></input>
        <input type="email" placeholder="email"></input>
        <input type="password" placeholder="password"></input>
      </form>
    </div>

Updated Live working demo