ребята, во-первых, это может выглядеть как дубликат, но я клянусь, я искал повсюду, и все возможные решения не сработали для меня.
Классическая проблема: «Когда я нажимаю на элемент, 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, ни один из них не работает.
Может, кто-нибудь подскажет мне об этом?