Estoy usando bootstrap para ayudarme a crear un formulario de inicio de sesión. pero cuando renderizo este componente de inicio de sesión, obtengo un navegador vacío, pero cuando renderizo otros componentes sin los grupos de formularios y Form Control, obtengo los contenidos en el navegador.
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;Debe representar este componente Iniciar sesión dentro del contexto de enrutamiento porque está utilizando el enlace de reaccionar reaccionar-enrutador-dom
Estás haciendo algo como:
<SignIn /> // <-- This can't be outside router! <Router> <Routes> <Route path="/" element={<Home />} /> <Route path="/whatever" element={<YourComp/>} /> </Routes> </Router>Debe moverlo dentro del contexto de enrutamiento para que el enrutador sea consciente y pueda administrar el enrutamiento correctamente.
<Router> <SignIn/> <Routes> <Route path="/" element={<Home />} /> <Route path="/whatever" element={<YourComp/>} /> </Routes> </Router>He creado Demo :
https://codesandbox.io/s/dulces-mañanas-0pt00?file=/src/SignIn.js
También puede leer más referencias aquí :