React Router route not rendering component - reactjs

Question

I'm trying to redirect my HomePage Component to a different component with one click of a button. However, when the link is clicked it's changing the path in the browser URL but I'm not able to see any change (i.e., my new Addbook component is not being rendered inside Route).
App.js
import React, { Component, useState } from "react";
import axios from "axios";
import "./styles.css";
import HomePage from "./HomePage.js";
import Addbook from "./AddBook.js";
import {Router,Switch,Route, BrowserRouter} from "react-router-dom";
class App extends React.Component {
render()
{
return (
<BrowserRouter>
<Switch>
<Route exact path="/"><HomePage></HomePage></Route>
<Route path="/add"><Addbook></Addbook></Route>
</Switch>
</BrowserRouter>
);
}
}
export default App;
HomePage.js
import React from "react";
import {BrowserRouter, Link, Router, Switch, useHistory } from "react-router-dom";
class HomePage extends React.Component {
render() {
return ( <div>
<h1>Book Library</h1>
<BrowserRouter>
<Switch>
<Link to="/add"><button id="addbook">Add Book</button></Link>
<Link to="/search"><button id="searchbook">Search Book</button></Link>
</Switch>
</BrowserRouter>
</div>
)
}
}
export default HomePage
AddBook.js
import React from "react";
import axios from "axios";
const addBook = () => {
axios.post("http://localhost:3000/addbook",{
name: this.state.name,
author : this.state.author,
date: this.state.date,
category: this.state.category
}).then(response => response.data).then(data => {
console.log(data);
if(data=="added")
{
}
}, (error) => {
console.log(error);
});
}
class Addbook extends React.Component{
render(){
return (<div>
New Book<input type="text" onChange={(e)=>{
this.setState({name: e.target.value})
}} name="name" id="newbook"/>
Author<input type="text" onChange={(e)=>{
this.setState({author: e.target.value})
}} name="author" id="Author"/>
Date of Publish<input type="date" onChange={(e)=>{
this.setState({date: e.target.value})
}} name="date" id="dtofpub"/>
Category<input type="text" onChange={(e)=>{
this.setState({category: e.target.value})
}} name="category" id="category"/>
<button id="add" onClick={addBook}>ADD</button>
</div> )
}
}
export default Addbook;

Answer 1

you should update homePage like this :
import React from "react";
import {BrowserRouter, Link, Router, Switch, useHistory } from "react-router-dom";
class HomePage extends React.Component {
render() {
return (
<div>
<h1>Book Library</h1>
<Link to="/add"><button id="addbook">Add Book</button></Link>
<Link to="/search"><button id="searchbook">Search Book</button></Link>
</div>
)
}
}
export default HomePage

Answer 2

There is syntax error please replace
<Route exact path="/"><HomePage></HomePage></Route>
To
<Route exact path="/" component={HomePage}></Route>