Using pagination in a React component, without re-rendering the entire component - reactjs

Question

I've set up pagination(using a 3rd party component) in one of my React components. Each time a page button is clicked, this function is executed:
handlePageChange= (page)=>{
history.push(`/duplicates?page=${page}`)
}
I'm using "Router" from "react-router-dom", and "createBrowserHistory" from JS history library:
When the component mounts, i simply extract the "page" query parameter, and dispatch a Redux action, that fetches all relevant data, and puts its in the Redux state:
componentDidMount(){
this.props.fetch(this.state.activePage)
}
The "activePage" is taken from the component state:
state={
activePage: this.queryParams.page || 1
}
Everything works nicely, with one very fundamental "flaw": Being that i use history.push on every pagination action, the entire component re-mounts. Sure, i can navigate back and forth in my "pages", and even bookmark them, but the fact that the entire component needs to re-render, seems to undermine one of the main purposes of React: Being very efficient, when it comes to DOM manipulations.
Is there any way to setup pagination, without having to choose between history and efficiency?
EDIT: this is the component:
import React from 'react';
import _ from "lodash";
import { connect } from 'react-redux';
import { searchAction, fetchDuplicates } from '../../actions/products';
import DuplicateProduct from './DuplicateProduct';
import Pagination from 'react-js-pagination'
import queryString from 'query-string';
import {history} from '../../routers/AppRouter';
class Duplicates extends React.Component{
queryParams= queryString.parse(this.props.location.search);
state={
activePage: this.queryParams.page || 1
}
handlePageChange= (page)=>{
history.push(`/duplicates?page=${page}`)
}
componentDidMount(){
this.props.fetch(this.state.activePage)
}
render(){
console.log(this.queryParams.page)
return(
<div>
<h1>Duplicate Titles</h1>
<p>number of pages: {this.props.numberOfPages}</p>
<Pagination
activePage={parseInt(this.state.activePage)}
itemsCountPerPage={150}
totalItemsCount={this.props.numberOfProducts}
pageRangeDisplayed={10}
onChange={this.handlePageChange}
className="pagination"
/>
<br/>
{this.props.duplicates.length>0 &&(
this.props.duplicates[0].map((duplicate_group)=>{
return (
<div key={duplicate_group[0].id}>
<DuplicateProduct duplicate_group={duplicate_group}/>
<hr/>
</div>
)
})
)
}
</div>
);
};
}
const mapStateToProps= (state)=>({
duplicates: state.products.duplicates,
numberOfPages: state.products.numberOfPages,
numberOfProducts: state.products.numberOfProducts
})
const mapDispatchToProps =(dispatch,props)=>({
fetch: (page)=> dispatch(fetchDuplicates(page))
})
export default connect(mapStateToProps, mapDispatchToProps)(Duplicates);
This is the PrivateRoute:
import React from 'react';
import { connect } from 'react-redux';
import { Route, Redirect } from 'react-router-dom';
import Header from '../components/Header';
export const PrivateRoute = ({
isAuthenticated,
component: Component,
...rest
}) => (
<Route {...rest} component={(props) => (
isAuthenticated ? (
<div>
<Header />
<Component {...props} />
</div>
) : (
<Redirect to="/" />
)
)} />
);
const mapStateToProps = (state) => ({
isAuthenticated: state.auth.isLoggedIn
});
export default connect(mapStateToProps)(PrivateRoute);