如何在同一頁面上的兩個組件之間切換？

Question

我正在嘗試在 React Js 中創建一個登錄和注冊頁面，想法是它們應該呈現在同一頁面上，並且用戶應該能夠在它們之間切換（類似於這個例子）

我可以在組件之間創建切換功能（使用 useState），但問題是我還需要根據用戶的選擇更改 url（如果用戶想要登錄，則 url 應該是“/login”，如果注冊 => “/報名”）。 我使用 React Router 為登錄和注冊創建了單獨的組件，但它們在單獨的頁面上打開，我希望實現的是將它們都放在同一個登錄頁面上。

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

我對 React Js 相當陌生，所以我不知道這是否可能。 我將不勝感激任何建議和幫助，謝謝。

Answer 1

首先，不要在登錄組件中包含“登錄”和“注冊”鏈接。 將它們移動到您的 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>

請注意，必須刪除<Route exact path='/'>中的exact ，以便您可以在路由更改時切換和呈現登錄或注冊頁面。 你可以隨時參考react-router 教程。

對於 Login 組件，只需包含 Form（就像您為 Sign Up 組件所做的那樣）就足夠了。

更新的代碼沙箱

Answer 2

單獨創建一個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>
  )
}

現在將其導入到登錄和注冊組件中

登錄.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>

注冊.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>

更新的現場工作演示

Answer 3

從<App />組件中刪除<Login />標簽並將其添加到component prop 中，就像添加注冊一樣。 您很高興在“/”路線中查看登錄頁面。

然后從登錄組件中刪除<Link to="/">標簽並只保留<Link to="/sign-up" > 。 然后，當您點擊登錄頁面中的鏈接時，您將被路由到注冊組件。

但是，要使其正常工作，您將需要“react-router”中的“歷史記錄”。 從“react”導入“useHistory”並將history = useHistory()放入您的登錄組件（以及注冊組件中以返回）並添加<Link to="sign-up" onClick = {() => history.push('/sign-up')} 。