I am using bootstrap to help me create a login form. but when rendering this sign-in component I get an empty browser but when I render other components without the Form groups and Form Control I get the contents in the browser.
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;
CodePudding user response:
You need to render this component SignIn inside the routing context because you are using Link from react react-router-dom
You are doing something like:
<SignIn /> // <-- This can't be outside router!
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/whatever" element={<YourComp/>} />
</Routes>
</Router>
You should move it inside the routing context so the Router is aware and can manage routing correctly.
<Router>
<SignIn/>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/whatever" element={<YourComp/>} />
</Routes>
</Router>
I have created Demo:
https://codesandbox.io/s/sweet-morning-0pt00?file=/src/SignIn.js
Also you can read more references here: