How to navigate to another component using onclick?

Question

I am new to React.js. I am not sure how to use the react-router-dom. How can I manipulate handleAddContact() in ContactList so that when I press the button then I have to navigate to AddContacts page?

This is my App.js file:

import React, { Component } from ‘react’;
import ContactList from ‘./pages/ContactList’;
import AddContacts from ‘./pages/AddContacts’;
import { Switch, Route } from ‘react-router-dom’;

class App extends Component {
 render() {
   return (
     <div className=“App”>
     <Switch>
       <Route exact path = “/” component ={ContactList} />
       <Route exact path = “/AddContacts” component ={AddContacts} />
       </Switch>
     </div>
   );
 }
}
export default App;

This is my ContactList.js file:

import React, { Component } from ‘react’;

class ContactList extends Component {

    handleAddContact(e){
        e.preventDefault();
        console.log (“Will take to Add Contacts page”)
        // please provide the logic for this function.
    }
    render(){
        return (
            <div className=“contact-form”>
                <div className=‘contact-buttons’>
                    <button onClick ={this.handleAddContact}>Add Contact</button>
                    </div>
        </div>
      )
    }    
}
export default ContactList;