My route definition:
...{
path: '/profile/:id',
component: ProfilePage
}, ...
and then the mapping is:
{routes.map(({ path, component }) => {
return (
<Route
exact
key={path}
path={path}
component={component}
/>
)
})}
If I navigate from */main* to */profile/3* everything is fine. But if I am already on a profile and navigate to another profile with different ID (*profile/3* -> *profile/5*) the problem starts. The URL in the browser changes but the content does not rerender. Also the useEffect function is not called again. If I navigate to any other url and then start the search for a person, everything is fine again. So only a second call from profile to profile does not work.
My navigation in the list is done by
const onItemSelected = (event) => {
const selectedPerson = event.itemData
setShowSuggestions(false)
setFilteredSuggestions([])
setInput("")
if(selectedPerson && selectedPerson.id)
history.replace(`/profile/${selectedPerson.id}`);
}
My useEffect in profile.js
export default (props) => {
...
useEffect(() => {
try {
setLoading(true)
const urlPath = window.location.href.split('/')
const id = urlPath[urlPath.length - 1]
loadProfile(id)
} catch (e) {
setLoading(false)
history.push("/aufgabenliste")
}
}, []);
I also tried history.push() but it didn't work too.
I found the solution. First of all it is much easier to load the ID from the props instead of accessing the window.location.href...
And the second step is to set the props as dependency in useEffect. So the final code looks like:
useEffect(() => {
try {
setLoading(true)
const id = props.match.params.id
loadProfile(id)
} catch (e) {
setLoading(false)
history.push("/aufgabenliste")
}
}, [props]);