Link button to a component using react routing

I’m tying to link a form to a button in my single page web application. With the button, a react list is also rendered at the same time. I want only to render the form component once the button is clicked.

Here’s App.js file

import './App.css';
import Form from './Pages/Form/Form';
import {BrowserRouter as Router, Link} from 'react-router-dom'
import NameList from './Components/NameList/NameList';

function App() {
  return (
    <div>
      <Router>
      <Link to="/Form">
          <button className='btn btn-primary'>Add Subscription</button>
        </Link>
      </Router>
      <NameList/>

    </div>
 
  );
}

export default App;

I get a warning because the Form component is not used also.

WARNING in src\App.js
  Line 2:8:  'Form' is defined but never used  no-unused-vars

webpack compiled with 1 warning

This is the file format.