如何使用onclick导航到另一个组件？

Question

我是react.js的新手。我需要帮助才能使用react-router-dom。我请求大家请让我知道如何在ContactList中操作handleAddContact()，这样当我按下按钮时我必须导航到AddContacts页面。

这是我的App.js文件

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;

这是我的ContactList.js文件

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;