when I add Link tag in the component Login the page content disappears, what might be the problem?

Login.js (without Link tag):

import React from 'react'
import { Link } from 'react-router-dom'
function Login() {
  return (
    <div className='container  mx-auto'>
      <form className='col-md-5  mx-auto'>
      <h2 className='m-5'>Login into MERN Project</h2>
  <div className="mb-3">
    <label for="exampleInputEmail1" className="form-label">Email address</label>
    <input type="email" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" required/>
    <div id="emailHelp" className="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div className="mb-3">
    <label for="exampleInputPassword1" className="form-label">Password</label>
    <input type="password" className="form-control" id="exampleInputPassword1" required/>
  </div>
  <button type="submit" className="btn btn-primary">Submit</button>
</form>
<nav>
</nav>
    </div>

  )
}

export default Login

Output: enter image description here

Login.js with Link tag:

    import React from 'react'
    import { Link } from 'react-router-dom'    
    function Login() {
      return (
        <div className='container  mx-auto'>        
         <form className='col-md-5  mx-auto'>
          <h2 className='m-5'>Login into MERN Project</h2>
      <div className="mb-3">
        <label for="exampleInputEmail1" className="form-label">Email address</label>
        <input type="email" className="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" required/>
        <div id="emailHelp" className="form-text">We'll never share your email with anyone else.</div>
      </div>
      <div className="mb-3">
        <label for="exampleInputPassword1" className="form-label">Password</label>
        <input type="password" className="form-control" id="exampleInputPassword1" required/>
      </div>
      <button type="submit" className="btn btn-primary">Submit</button>
    </form>
    <nav>
<Link className=''>Not a member? Register here</Link>
    </nav>
        </div>

      )
    }    
    export default Login

The output is empty page: enter image description here

CodePudding user response：

In Link Component add link destination..

<Link to="/register" > Not a member? Register here</Link>