Почему не рендерится компонент при переходе на другую страницу?

Question

[Kesio]

когда нажимаю на кнопку для перехода на другую стр, у меня не рендерится новый компонент

App:

<Router>
            <div>
                <Header />
                <Switch>          
                    <Route path="/" exact>
                        <Main />
                    </Route>
                    <Route path='/shop/jordan'>
                        <Shop link="https://60fbcfc191156a0017b4c8bb.mockapi.io/jordan" />
                    </Route>
                    <Route path='/shop/run'>
                        <Shop link="https://60fbcfc191156a0017b4c8bb.mockapi.io/run" />
                    </Route>
                    <Route path='/shop/basketball'>
                        <Shop link="https://60fbcfc191156a0017b4c8bb.mockapi.io/basketball" />
                    </Route>
                    <Route path="/shop" exact >
                        <Shop link="https://60fbcfc191156a0017b4c8bb.mockapi.io/run" />
                    </Route>       
                </Switch>
            </div>

        </Router>

После перехода на другую стр меняется пропс, должен быть перерендер компонента Item
Вот Item:

import React from 'react';
import stylus from '../shop.module.scss';

function Items(props) {
    const [items, setItems] = React.useState([])
    const [link, setLink] = React.useState(props.link)
    React.useEffect(() => {
        fetch(link)
            .then(response => response.json())
            .then((json) => {
                return setItems(json)
            })
    }, [link])

    return (
        <div className={stylus.items}>
            {
                items.map(obj =>
                    <div className={stylus.item} key={obj.id}>
                        <img src={obj.img} alt="" />
                        <h4>{obj.name}</h4>
                        <h4>Price: {obj.price}</h4>
                    </div>
                )
            }
        </div>
    )
}

export default Items;

Он обновляется только после самостоятельного обновления страницы, но хотелось при изменения пропса делать повторный рендер компонента Item
Самостоятельно поискав как это сделать я не понял :D

Comments

[Alexandroppolus]

Вот Item

Это не Item, а Items

а в роутах рендерится некий Shop. В общем, непонятно кто есть кто

Answer 1

[0xD34F]

А может, всё-таки рендерится? Значение link не обновляется при изменении props.link, так что эффект не срабатывает - отсюда отсутствие внешних изменений при повторных рендерингах.

Уберите link, он вам тут не нужен, используйте в эффекте сразу props.link:

React.useEffect(() => {
  fetch(props.link)
    .then(r => r.json())
    .then(setItems);
}, [ props.link ]);