Component not rerendering on route changing - reactjs

Question

I am using React Hooks and my state (moduleName) is not getting updated even though the prop(which i get from route)changes? I need to use moduleName to useEffect Dependencies to make Api Call.
I am also using withRouter at my component but it doesnt seem to rerender my component when route changes. My App.js looks like this
<Router>
<Fragment>
<Switch>
<Route path="/" exact={true} component={Login} />
<Route component={Routes} />
</Switch>
</Fragment>
</Router>
and at the component i need to re render on route changei have this
const ListView = (props) =>{
const [moduleName, setModuleName] =useState(props.match.params.moduleName);
useEffect(() => {
//api call here
}, [moduleName]);
}
export default connect(
mapStateToProps,
null
)(withRouter(ListView));**

Answer 1

You should listen prop changes inside the useEffect Hook, and you don't need to hold state for a prop, so you can delete useState hook
const ListView = (props) =>{
useEffect(() => {
let moduleName = props.match.params.moduleName
if(moduleName) {
console.log(props.match.params.moduleName)
// do something when moduleName changes
// api call
axios.get('someurl/'+moduleName)
}
}, [props.match.params.moduleName]);
}
export default withRouter(connect(mapStateToProps,null)(ListView));