React 组件加载到当前组件下方

Question

我有一个在导航菜单中的组件Navbar。当我单击“登录”时，UserForm组件将打开。UserForm 组件还有另一个用于使用组件创建帐户页面的路由UserRegister。

所以，现在的问题是，当我单击<Link>页面时userForm，它会调用该组件UserRegister ，但会将其 Ui 打印在当前组件 Ui ( UserForm) 的下方，并完美更改 Url。

所以事情是 Navbar -> Login -> UserForm （该组件打印在当前组件的正下方）。

我想在新的刷新页面上打开它。我尝试使用 withRouter 和其他不同的源来解决它，但我只是看不到导致它在下面加载的一个错误。

我已经删除了 JSX 的访问权限。

导航栏.js

import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

//components

import MainPage from "./MainPage";

export default function TopNavbar() {

  return (

    

        <Nav className="ml-auto">

          <Link to="/" className="Link">

            <p className="link-text"> Home</p>

          </Link>

          <Link to="/Login" className="Link">

            <p className="link-text"> Login User</p>

          </Link>

          <Link to="/" className="Link">

            <img src={img} className="avatar-img" alt="avatar" />

          </Link>

            </Navbar>

  );

}

用户表单.js

import {

  BrowserRouter as Router,

  Switch,

  Route,

  Link,

  withRouter

} from "react-router-dom";

//components

import UserRegister from "./UserRegister";

export default function UserForm() {

  return (

    <Router>

      

            <form method="post">

              <input type="text" placeholder="User Name" className="error" />

            <input type="password" placeholder="Password" className="error" />

 <input type="submit" className="btn btn-primary login-button" />

            </form>

            <div className="further-links">

              <Link to="/forgot-password">

                <p>Forgot Password</p> <br />

              </Link>

              <Link to="/create-account">

                <p>Create New Account </p>

              </Link>

              <Switch>

                <Route exact path="/forgot-password" component={""} />

                <Route exact path="/create-account" component={UserRegister} />

              </Switch>

              <br />

            </div>

      </div>

    </Router>

  );

}

沙盒链接

Answer 1

我不熟悉codesandbox，似乎它在相应更新方面存在一些问题。但是，如果您将路线从用户表单移至 App.js。这给了你什么？