React Link Чтобы не обновлять компонент

Question

Я использую React с Redux для перечисления количества элементов, а внутри элемента у меня есть список похожих элементов

На домашней странице (при нажатии на любой из них есть список элементов, это переходит к пути элемента), который работает хорошо, но внутри страницы элемента, когда вы нажимаете на элементы из списка похожих элементов (представление не обновляется)

codeSandobx здесь

Приложение. js

const store = createStore(ItemsReducer, applyMiddleware(...middlewares));


class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <Main />
      </Provider>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

main. js

const Main = () => {
  return (
    <Router>
      <div>
        <Header />

        <div className="container-fluid">
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/item/:id" component={Item} />
          </Switch>
        </div>
      </div>
    </Router>
  );
};

export default Main;

Home. js

class Home extends React.Component {

  render() {
    const itemsList = this.props.items.map(item => {
      return <ItemList item={item} key={item.id} />;
    });
    return <div className="items-list"> {itemsList}</div>;
  }
}
const mapStateToProps = state => ({
  items: state.items,
  user: state.user
});
export default connect(mapStateToProps, null, null, {
  pure: false
})(Home);

Item. js

class Item extends React.Component {
  constructor(props) {
    super();
    this.state = {
      item_id: props.match.params.id,

    };


  }

  render() {

    const itemsList = this.props.items.map(item => {
      return <ItemList item={item} key={item.id} />;
    });
    return (
      <div id="item-container">

        <div className="item-list fav-items"> {itemsList} </div>;
      </div>
    );
  }
}

const mapStateToProps = state => ({
  items: state.items,
  user: state.user
});
export default connect(mapStateToProps, null, null, {
  pure: false
})(Item);

и, наконец, ItemList. js

class ItemList extends React.Component {
  render() {
    const item = this.props.item;
    const item_link = "/item/" + item.id;

    return (
      <Link to={item_link}>
        <div className="item-li">
                {item.title}
        </div>
      </Link>
    );
  }
}

export default ItemList;

Я устал использовать это решение из реактивно-редукционных документов, но это не работал

Answer 1

Что вы ожидаете обновить при нажатии на ссылку? Любой путь / элемент /: id (с любым идентификатором: 2423, 2435, 5465) будет показывать тот же результат, потому что вы не используете params.id внутри компонента Item

ОБНОВЛЕНО

Когда идентификатор изменяется, компонент не перемонтируется, обновляется только компонент (это правильное поведение). Если вы хотите извлекать данные при каждом изменении идентификатора, следующее решение должно работать для вас

при hooks:

const Item = () => {
  const params = useParams();

  useEffect(() => {
    axios.get(`/item/${params.id}`).then(...)
  }, [params.id]);

  return (
    ...
  )
}

useEffect будет вызывать fetch каждый раз, когда идентификатор изменяется

и в компоненте класса вы должны использовать componentDidUpdate:

class Item extends Component {
  componentDidMount() {
    this.fetchData();
  }

  componentDidUpdate(prevProps) {
    if (prevProps.match.params.id !== this.props.match.params.id) {
      this.fetchData();
    }
  }

  fetchData = () => {
    ...
  }

  ...
}