How to switch between 2 components on the same page?

Question

I'm trying to create a Login and Sign Up page in React Js, the idea is that that they should be rendered on the same page, and user should be able to switch between them (something like this example )

I can create toggle function between components(using useState), but the problem is that I need the url to change according to the user's choice also( if user wants to login, url should be "/login", if sign-up => "/signup"). I created separate components for Login and Signup with React Router, but they're opening on separate pages, what I would love to achieve is to have both of them on the same Login page.

my code in CodeSandbox

import React from "react";
import "./styles.css";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Login from "./Login";
import SignUp from "./SignUp";

export default function App() {
  return (
    <div className="App">
      <Router>
        <Switch>
          <Route exact path="/">
            <Login />
          </Route>
          <Route exact path="/sign-up" component={SignUp} />
        </Switch>
      </Router>
    </div>
  );
}

import React from "react";
import { Link } from "react-router-dom";

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

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

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

import React from "react";


export default function SignUp() {
  return (
    <div>

   <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>
  );
}

I'm fairly new to React Js, so I don't know if this is even possible. I would appreciate any suggestion and help, thank you.

Answer 1

First, do not include the 'Login' and 'Sign Up' links in Login component. Move them to your App.js.

App.js

<div className="App">
  <Router>
    <Switch>
      <Route path="/">
        <div style={{ display: "flex", justifyContent: "space-evenly" }}>
          <Link to="/login">
            <h1>Login</h1>
          </Link>

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

        <Route exact path="/sign-up" component={SignUp} />
        <Route exact path="/Login" component={Login} />
      </Route>
    </Switch>
  </Router>
</div>

Note that the exact in <Route exact path='/'> has to be removed so that you can switch and render the Login or Sign Up page when route change. You can always refer to the react-router tutorial .

And for the Login component, just include the Form (like what you did for the Sign Up component) and that's enough.

Updatedcode sandbox

Answer 2

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

Answer 3

Remove the <Login /> tag from <App /> component and add it inside component prop just like signup is added. You're good to view login page in "/" route.

Then remove <Link to="/"> tag from login component and keep only <Link to="/sign-up" > . Then you will be routed to signup component when you follow the link in login page.

But, for that to work, you will need "history" from "react-router". Import "useHistory" from "react" and put history = useHistory() inside your login component (and inside signup component as well to route back) and add <Link to="sign-up" onClick = {() => history.push('/sign-up')} .