我有一個在導(dǎo)航菜單中的組件Navbar。當(dāng)我單擊“登錄”時,UserForm組件將打開。UserForm 組件還有另一個用于使用組件創(chuàng)建帳戶頁面的路由UserRegister。所以,現(xiàn)在的問題是,當(dāng)我單擊<Link>頁面時userForm,它會調(diào)用該組件UserRegister ,但會將其 Ui 打印在當(dāng)前組件 Ui ( UserForm) 的下方,并完美更改 Url。所以事情是 Navbar -> Login -> UserForm (該組件打印在當(dāng)前組件的正下方)。我想在新的刷新頁面上打開它。我嘗試使用 withRouter 和其他不同的源來解決它,但我只是看不到導(dǎo)致它在下面加載的一個錯誤。我已經(jīng)刪除了 JSX 的訪問權(quán)限。導(dǎo)航欄.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> );}沙盒鏈接
React 組件加載到當(dāng)前組件下方
青春有我
2023-11-02 21:28:36