Mi definición de ruta:
...{ path: '/profile/:id', component: ProfilePage }, ...y luego el mapeo es:
{routes.map(({ path, component }) => { return ( <Route exact key={path} path={path} component={component} /> ) })} Si navego de */main* a */profile/3* todo está bien. Pero si ya estoy en un perfil y navego a otro perfil con una identificación diferente (*profile/3* -> *profile/5*) , comienza el problema. La URL en el navegador cambia pero el contenido no se vuelve a representar. Además, la función useEffect no se vuelve a llamar. Si navego a cualquier otra URL y luego empiezo la búsqueda de una persona, todo vuelve a estar bien. Entonces solo una segunda llamada de perfil a perfil no funciona.
Mi navegación en la lista se hace por
const onItemSelected = (event) => { const selectedPerson = event.itemData setShowSuggestions(false) setFilteredSuggestions([]) setInput("") if(selectedPerson && selectedPerson.id) history.replace(`/profile/${selectedPerson.id}`); } Mi useEffect en 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") } }, []); También probé history.push() pero tampoco funcionó.
Encontré la solución. En primer lugar, es mucho más fácil cargar la ID desde los accesorios en lugar de acceder a window.location.href...
Y el segundo paso es configurar los accesorios como dependencia en useEffect. Entonces el código final se ve así:
useEffect(() => { try { setLoading(true) const id = props.match.params.id loadProfile(id) } catch (e) { setLoading(false) history.push("/aufgabenliste") } }, [props]);