Реактивный компонент не перерисовывается при изменении window.location

Question

Итак, у меня есть компонент реакции для главного меню.

Список активных маршрутизаторов <Link/>, которые указывают на разные страницы.Каждая ссылка проверяет window.location.path, чтобы выяснить, является ли она активной страницей, чтобы активный элемент меню мог отображаться по-разному.

import React, { Component } from "react";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import List from "@material-ui/core/List";

class MainMenu extends Component {
  render() {
    return (
      <List>
        <Link to="/products" className={window.location.pathname === "/products" ? "active" : null }>Products</Link>
        <Link to="/sales" className={window.location.pathname === "/sales" ? "active" : null }>Sales</Link>
      </List>
    )
  }
}

Это на самом деле работало нормально, однако теперь я хочу подключить этот компонент менюв моем хранилище избыточности, чтобы я мог отобразить некоторые данные из хранилища внутри меню, как только я добавляю функцию connect, меню разрывается так, что при смене страниц «активный» класс не применяется.т.е. компонент не обновляется даже though window.location.pathname изменилось.

Я не включил свой код магазина, потому что я тестировал его с помощью фиктивных редукторов, которые ничего не делают, а также я даже еще нигде не использовал данные в компоненте.

export default connect(state => ({ foo: state.bar }))(MainMenu);

Я до сих пор не уверен, связана ли эта проблема с connect или если connect только что выделил проблему с использованием window.location.pathname и реагирует, не знает, когда обновлять.

Любая помощь очень ценится!

Answer 1

Представление изменяется при любых изменениях этого состояния компонента.Я бы посоветовал вам прослушать изменения в window.location

Вот код

constructor(){
   this.state = {currentPath:window.location.pathname}

   window.onbeforeunload = function(e) {
      this.setState({currentPath:window.location.pathname})
   };
}

и в render ()

render() {
    return (
      <List>
        <Link to="/products" className={this.state.currentPath === "/products" ? "active" : null }>Products</Link>
        <Link to="/sales" className={this.state.currentPath === "/sales" ? "active" : null }>Sales</Link>
      </List>
    )
  }

Answer 2

Компонент React не будет повторно отображаться при изменении имени window.location.pathname.Только изменения состояния приведут к повторному отображению компонента.Вам нужно прослушать изменение window.pathname и сопоставить его с состоянием, тогда только ваш компонент будет перерисовывать

. Для таких вещей вы можете взглянуть на response-router.Добавьте его в свой проект, и такие вещи могут быть легко достигнуты.

https://reacttraining.com/react-router/core