React component not visible while using 'useNavigate'

Question

My function as follows is not displayed when used as <LogIn/> in App.js. Intead of displaying the forms included in the LogIn.js component, nothing is rendered i.e. a white screen. If I remove the navigate and useNavigate lines it does render.

import React from 'react'
import { useNavigate } from 'react-router-dom';
import Button from 'react-bootstrap/Button';
import Form  from 'react-bootstrap/Form';
import './Form.css';


function LogIn() {

  let navigate = useNavigate();
  return (
    <div className='login-wrapper'>
      <h1>Log In</h1>

      <Form>
        <Form.Group className="mb-3" controlId="formBasicEmail">
          <Form.Label>Username</Form.Label>
          <Form.Control type="email" placeholder="Username" />
        </Form.Group>

        <Form.Group className="mb-3" controlId="formBasicPassword">
          <Form.Label>Password</Form.Label>
          <Form.Control type="password" placeholder="Password" />
        </Form.Group>
      </Form>

      <div>
        <Button variant="primary">
          Log In
        </Button>

        <Button variant="primary" className="mx-2"
          onClick={() => {navigate("/signup");
        }}>
          Sign Up
        </Button>
      </div>
    </div>
  )
}


export default LogIn

After removing the line let navigate=useNavigate(); and the navigate function from the button it renders correctly. I am unsure why this is?

Answer 1

A router object was required around the useNavigate function.