我有一個在導航菜單中的組件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>  );}沙盒鏈接