我正在使用引導程式來幫助我創建登錄表單。但是當呈現這個登錄組件時，我得到一個空的瀏覽器，但是當我呈現沒有表單組和表單控制元件的其他組件時，我在瀏覽器中獲得了內容。
import React from 'react'
import { Button} from 'react-bootstrap';
import { Form } from 'react-bootstrap';
import GoogleButton from 'react-google-button';
import { Link } from 'react-router-dom';
const SignIn = () => {
return (
<>
<div className="p-4 box">
<h2 className="mb-3">Bonnie Electronics</h2>
<Form>
<Form.Group className="mb-3" controlId="formBasicEmail">
<Form.Control type='email' placeholder="email address" />
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicPassword">
<Form.Control type='password' placeholder="password" />
</Form.Group>
<div className="d-grid gap-2">
<Button type="submit" variant="primary">Login</Button>
</div>
</Form>
<hr />
<div>
<GoogleButton type="dark" className="g-button" />
</div>
</div>
<div className="p-4 box mt-3 text-center">
Don't Have an Account? <Link to='/signup'>SignUp</Link>`enter code here`
</div>
</>
)
}
export default SignIn;
uj5u.com熱心網友回復：
你需要使這個組件簽到內的路由方面，因為你使用的鏈接從反應反應路由器-DOM
你正在做這樣的事情：
<SignIn /> // <-- This can't be outside router!
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/whatever" element={<YourComp/>} />
</Routes>
</Router>
您應該將它移動到路由背景關系中，以便路由器知道并可以正確管理路由。
<Router>
<SignIn/>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/whatever" element={<YourComp/>} />
</Routes>
</Router>
我已經創建了演示：
https://codesandbox.io/s/sweet-morning-0pt00?file=/src/SignIn.js
您也可以在此處閱讀更多參考資料：
錯誤：useHref() 只能在 <Router> 組件的背景關系中使用。當我直接將 url 設為 localhost:3000/experiences 時，它會起作用
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/398186.html
標籤：javascript 反应 反应引导
上一篇：在React的模態內打開新模型