React-router re-render on URL change with route using regex - reactjs

Question

I have an App like this:
function App() {
return (
<Router>
<OpNavbar/>
<Route exact={true} path="/" render={() => (
<h1>This is the welcome page!</h1>
)}/>
<Route path="/([a-z]{3,4})/([a-z]+)list" component={OpTable}/>
</Router>
);
}
If I am in "/" and switch paths by clicking a link to for example "/pfm/examplelist" and viceversa it renders the respective component without any problem. However if I am in say "/pfm/examplelist" and switch to "/pfm/anotherlist" the url changes but my component will not be re-rendered. I assume it's because both the old and the new paths match my regex? How can re-render my component on every url change?
Here is a stripped-down version of my Table component:
function OpTable(props) {
const [apiData, setData] = useState([]);
const [columns, setColumns] = useState([{dataField: "Dummy", text: "Loading, Please Wait..."}]);
useEffect(() => {
axios.get(props.match.url)
.then(response => {
let res_data = response.data;
setData(res_data.data);
setColumns(res_data.columns);
})
.catch(error => {
console.log(error);
})
}, [])
return (
<BootstrapTable
keyField="id"
data={ apiData }
columns={ columns }
/>
);
}

Answer 1

This is the case when subsequent url calls same component.If you want to rerender,one of the way is to track your path(url) in useEffect.
useEffect(() => {
axios.get(props.match.url)
.then(response => {
let res_data = response.data;
setData(res_data.data);
setColumns(res_data.columns);
})
.catch(error => {
console.log(error);
})
}, [props.location.pathname])
I am not a regular user of hooks(I may be wrong with the syntax). But the logic is to call api(whenever there is change in url) required for that component which in turn sets state and rerender happen