Browser rendering an empty Page

Question

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;

score 1 · Accepted Answer · answered Dec 30 '21 at 10:48

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:

Error: useHref() may be used only in the context of a <Router> component. It works when I directly put the url as localhost:3000/experiences

Worked as fine as you suggested. Thanks a lot I have been starting projects. thinking that I made mistakes all along I have been working with Link and not knowing the components should be wrapped inside routs and Routers. Stack overflow is home — MAXWEL OCHIENG, Dec 30 '21 at 14:32
No problem mate :) everyday we learn new things and the best is to realize the things we have been doing bad fix it for future uses — olscode, Dec 30 '21 at 17:10

Browser rendering an empty Page

1 Answers1