<Link> не обновляет компонент, используя React + Redux (не дурак) - PullRequest
0 голосов
/ 09 мая 2018

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

Классическая проблема: «Когда я нажимаю на элемент, URL-адрес изменяется, но компонент не обновляется»

На самом деле он обновляется, но только по первому щелчку.

Вот мой соответствующий код:

index.js

...
render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <div>
        <App />
      </div>
    </ConnectedRouter>
  </Provider>,
  target
);

Компонент приложения

...
const App = () => (
    <BrowserRouter>
        <div>
            <Switch>
                <Route exact path="/" component={Home} />
                <Route path="/items/:id" component={Product} />
                <Route path="/items" component={Search} />
            </Switch>
        </div>
    </BrowserRouter>
);

export default App;

Поиск компонента

...
const Search = props => (
    <div>
        <header>
            <SearchBar />
        </header>
        <main>
            <SearchResult />
        </main>
    </div>
);

export default Search;

Компонент SearchResult

const renderItem = result => (
  <div key={result.id} className="result-item">
    <Link to={`/items/${result.id}`}>
        ...
    </Link>
  </div>
);

class SearchResult extends Component {
  componentWillMount() {
    if (!this.props.resultIsLoading && !this.props.results.items) {
      const { search: term } = queryString.parse(this.props.location.search);
      this.props.search(term);
    }
  }

  render() {
    if (!this.props.results.items) return <div>...</div>;

    return (
      <div className="container">
        <div className="product-list">
          {this.props.results.items.map(renderItem)}
        </div>
      </div>
    );
  }
}

const mapStateToProps = ({ results, resultIsLoading }) =>
  ({ results, resultIsLoading });

const mapDispatchToProps = dispatch =>
  bindActionCreators({ search }, dispatch);

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(SearchResult));

Когда я нажимаю, состояние не изменяется, редуктор не вызывается, а компонент ProductDetails не обновляется.

Я перепробовал множество возможных решений. {pure: false} при подключении, передать местоположение как реквизит, удалить основной BrowserRouter, удалить с помощью Router, ни один из них не работает.

Может, кто-нибудь подскажет мне об этом?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...