Router Issue in React Js (component for showing) - reactjs

Question

I am new to ReactJs and I want to navigate to another component on button click. I just want to perform a simple routing. This is the code that I tried. But I am not able to route it.
in App.js
import React from 'react';
import DepartmentShow from './Components/Departments/DepartmentShow';
import {BrowserRouter, Link, Route, Switch} from 'react-router-dom'
<BrowserRouter>
<Link to = '/departments'>Departments</Link>
<Switch>
<Route path='/customers' component= {CustomerList} exact={true} />
<Route path='/customers/new' component= {AddCustomer} />
<Route path='/customers/edit/:id' component= {EditCustomer} />
<Route path='/customers/:id' component= {CustomerShow} />
<Route Path='/departments' component={ListDepartment} exact={true}/>
<Route exact Path='/departments/:id' component={DepartmentShow} />
</Switch>
</BrowserRouter>
ListDepartment.js
<ul>
{
props.department.map((dept)=>{
return <li key={dept._id}><Link to={`/departments/${dept._id}`}>{dept.name}</Link>
<button onClick={()=>{handleRemove(dept._id)}}>remove</button>
<Link to={`/departments/${dept._id}`}><button>Show</button></Link>
</li>
})
}
</ul>
Note: cuustomer component i can route but not department.. :(
DepartmentShow.js
import React from 'react'
function DepartmentShow (props){
return(
<div>
<h1>Show Details</h1>
</div>
)
}
export default DepartmentShow
When i click on show button my show component should show.
when i click on show i get url like http://localhost:3000/departments/5e922d889b38110016837a77
but its is not routing to show component.