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

我试图在React Js中创建一个登录和注册页面，其想法是它们应该呈现在同一个页面上，用户应该能够在它们之间切换（类似于这样）

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

从“React”导入React；
导入“/styles.css”；
从“react Router dom”导入{BrowserRouter as Router，Switch，Route}；
从“/Login”导入登录名；
从“/SignUp”导入注册；
导出默认函数App（）{
返回(
);
}

从“React”导入React；
从“react router dom”导入{Link}；
导出默认函数登录（）{
返回(
登录
注册
);
}

从“React”导入React；
导出默认函数注册（）{
返回(
);
}

---

我对React Js相当陌生，所以我不知道这是否可能。感谢您的建议和帮助。

首先，不要在登录组件中包含“登录”和“注册”链接。将它们移动到你的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

，以便在更改路线时切换并呈现登录或注册页面。您可以随时参考

对于登录组件，只需包含表单（就像您为注册组件所做的那样），就足够了

已更新

从

组件中删除

标记，并将其添加到

组件

道具中，就像添加注册一样。您可以在“/”路径中查看登录页面

然后从登录组件中删除

标记，只保留

。然后，当您按照登录页面中的链接进行操作时，您将被路由到注册组件

---

但是，要使其工作，您需要“react router”中的“history”。从“react”导入“useHistory”，并将

history=useHistory（）

放在登录组件（以及注册组件内部）中，然后添加

history.push（'/sign'）}

分别创建头组件，并将其导入两个位置（登录和注册）组件中

范例

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

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

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

导出默认函数头（）{
返回(
登录
注册
)
}

现在在登录和注册组件中导入它

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

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

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

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

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

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

---

更新的

我很困惑，你说你想在同一页上有两页…这意味着它们不是两页，而是一页上的两个不同视图。使用

和

以及使用

反应路由器dom

的历史记录功能在路由之间移动有什么不对？