Question 242997 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Linking to the another page, but getting output on the same page (Below) REACT

App.js :-


function App() {

  return (
    <div className="App">
      <header className="App-header">
        <div className="bg-slate-700 w-100 flex flex-col justify-center h-full">
          <h1 className="font-bold text-white text-center justify-center  ">
            User Authentication
          </h1>

          <form className="flex flex-col p-6 m-8 space-y-2 rounded-md bg-white ">

           
            
            <div className="text-cyan-500 text-center ">
              Have an account{" "}
              <Link to="/login" className="underline">
                Sign In
              </Link>
            </div>

          </form>
        </div>
      </header>
      <Routes>
        <Route path="/login" element={<LoginPage />} />
      </Routes>
    </div>
  );
}

export default App;

LoginPage.js

import React from 'react'

function LoginPage() {
  return (
    <div>Login 
    </div>
  )
}

export default LoginPage

App.js is the user register form, under that I have a login button (div).
So onClick "Sign In", I get my Sign In page.
But I’m getting output on the same page, below the App.js form.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    App.js is the user register form, under that I have a login button (div). So onClick "Sign In", I get my Sign In page. But I'm getting output on the same page, below the App.js form.


  2. 0

    It will be displayed below the App.js form because you have defined the header outside the route component. To resolve it, you need to create a separate component with route path="/".

    function App() {

  return (
    <div className="App">
      <Routes>
        <Route exact path="/" element={<HomePage />} />
        <Route exact path="/login" element={<LoginPage />} />
      </Routes>
    </div>
  );
}

function HomePage(){
return(
<header className="App-header">
        <div className="bg-slate-700 w-100 flex flex-col justify-center h full">
          <h1 className="font-bold text-white text-center justify-center  ">
            User Authentication
          </h1>

          <form className="flex flex-col p-6 m-8 space-y-2 rounded-md bg-white ">

           
            
            <div className="text-cyan-500 text-center ">
              Have an account{" "}
              <Link to="/login" className="underline">
                Sign In
              </Link>
            </div>

          </form>
        </div>
      </header>)
}

export default App;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search