电抗组件负载低于当前组件

Question

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

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

所以事情是Navbar->登录->UserForm(此组件打印在当前组件的正下方(。

我想在新刷新的页面上打开它。我试着用路由器和其他不同的来源来解决这个问题，但我看不出有一个错误导致它在下面加载。

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

Navbar.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>
);
}

UserForm.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>
);
}

sandBox链接

Answer 1

我不熟悉codesandbox，它似乎在相应的更新方面存在一些问题。

但是，如果您将路由从Userform移动到App.js。这给了你什么？