React no rerender after url change

user_17871844 0
Viewed 153

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.

react-router-dom react-router react-hooks reactjs javascript
1 Answers

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]);
user_178718440
Related