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

Question

我有一个在导航菜单中的组件Navbar。当我单击“登录”时，UserForm组件将打开。UserForm 组件还有另一个用于使用组件创建帐户页面的路由UserRegister。所以，现在的问题是，当我单击<Link>页面时userForm，它会调用该组件UserRegister ，但会将其 Ui 打印在当前组件 Ui ( UserForm) 的下方，并完美更改 Url。所以事情是 Navbar -> Login -> UserForm （该组件打印在当前组件的正下方）。我想在新的刷新页面上打开它。我尝试使用 withRouter 和其他不同的源来解决它，但我只是看不到导致它在下面加载的一个错误。我已经删除了 JSX 的访问权限。导航栏.jsimport { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";//componentsimport 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>  );}用户表单.jsimport {  BrowserRouter as Router,  Switch,  Route,  Link,  withRouter} from "react-router-dom";//componentsimport 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。这给了你什么？