Question

我正在尝试在React Js中创建一个Login and Sign Up页面，其想法是它们应该呈现在同一页面上，并且用户应该能够在它们之间进行切换（类似{{3} }）

我可以在组件之间创建切换功能（使用useState），但是问题是我还需要根据用户的选择更改url（如果用户要登录，则url应该为“ / login”，如果登录， up =>“ / signup”）。我使用React Router为“登录”和“注册”创建了单独的组件，但是它们在不同的页面上打开，我想实现的是将它们都放在同一个“登录”页面上。

example

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>

请注意，必须删除exact中的<Route exact path='/'>，以便在更改路线时可以切换并呈现“登录”或“注册”页面。您可以随时参考react-router tutorial。

对于Login组件，只需包含Form（就像您对Sign Up组件所做的一样）就足够了。

更新了code sandbox

Answer 2

分别创建一个 Header 组件，然后将其导入两个地方（登录和注册）组件。

示例

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

现在将其导入“登录和注册”组件中

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>

更新了Live working demo

Answer 3

从import os os.system('aws configure set access_key {} --profile {}'.format(my_access_key, profile_name)) os.system('aws configure set secret_key {} --profile {}'.format(my_secret_key, profile_name)) os.system('aws configure set signature_version s3v4 --profile {}'.format(profile_name)) os.system("aws s3 presign {} --expires-in 604800 > public_url --profile {}".format(s3_path, profile_name))组件中删除<Login />标记，并将其添加到<App />道具内，就像添加注册一样。您可以通过“ /”路径查看登录页面。

然后从登录组件中删除component标签，并仅保留<Link to="/">。当您点击登录页面中的链接时，您将被带到注册组件。

但是，要使其正常工作，您将需要“反应路由器”中的“历史记录”。从“ react”导入“ useHistory”，并将<Link to="/sign-up" >放在您的登录组件中（以及在注册组件中以进行路由），并添加history = useHistory()。

如何在同一页面的2个组件之间切换？

3 个答案: