React+Redux中<Link>点击后URL变化但组件仅首次更新问题求助

兄弟，我一眼就揪出你代码里的核心问题了——你嵌套了两个Router实例！这正是导致点击<Link>后URL变化但组件不更新的根本原因。

为什么会出问题？ #

你在index.js里已经用了<ConnectedRouter>（Redux绑定的Router实现），但在App组件里又套了一层<BrowserRouter>。这两个Router会各自维护独立的路由上下文和history对象：当你点击<Link>时，触发的是内层<BrowserRouter>的history变化，而外层和Redux绑定的<ConnectedRouter>完全感知不到这个变化，自然不会触发组件更新。

第一步：移除嵌套的Router #

直接删掉App组件里的<BrowserRouter>，让路由组件直接处于<ConnectedRouter>的上下文之下：

修改后的App组件代码：

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

第二步：修复SearchResult的数据更新逻辑 #

另外，你在SearchResult里用了已废弃的componentWillMount生命周期，这个钩子只会在组件首次挂载时执行一次。当你在/items页面切换搜索关键词（URL的search参数变化）时，组件不会重新触发搜索请求。建议换成componentDidUpdate来监听location变化：

class SearchResult extends Component {
  componentDidMount() {
    this.fetchSearchResults();
  }

  componentDidUpdate(prevProps) {
    // 当URL的search参数变化时，重新发起搜索
    if (this.props.location.search !== prevProps.location.search) {
      this.fetchSearchResults();
    }
  }

  fetchSearchResults() {
    if (!this.props.resultIsLoading && !this.props.results.items) {
      const { search: term } = queryString.parse(this.props.location.search);
      this.props.search(term);
    }
  }

  // ... 其余render逻辑不变
}

如果后续打算迁移到函数组件，也可以用useEffect实现同样的逻辑：

const SearchResult = (props) => {
  useEffect(() => {
    if (!props.resultIsLoading && !props.results.items) {
      const { search: term } = queryString.parse(props.location.search);
      props.search(term);
    }
  }, [props.location.search, props.resultIsLoading, props.results.items]);

  // ... 其余render逻辑不变
}

最后检查点 #

• 确保所有路由相关的组件（包括<Link>）都处于同一个Router上下文之下，不要再嵌套任何Router。
• 如果你之前加的{ pure: false }、withRouter等尝试，现在可以根据情况移除，因为核心问题解决后这些可能不再需要。

先按这个方案修改，应该就能解决你遇到的问题了！

内容的提问来源于stack exchange，提问作者RRodrigues