반응 라우터의 <Route>에서 다른 props를 사용하여 동일한 구성 요소를 렌더링하는 방법

Question

재렌더링하고 싶은 News 组件，它需要一些道具，并且每当我单击 <Link /> 및 해당 클래스 소품이 있습니다. URL을 업데이트하지만 구성 요소를 다시 렌더링하지는 않습니다.

으아아아

이것들은 내 꺼야 <NavLink />

<Routes>
  <Route
    path="/"
    element={
      <News
        country={this.country}
        apiKey={this.API_KEY}
        pageSize={this.pageSize}
        category="general"
      />
    }
  />
  <Route
    path="/business"
    element={
      <News
        country={this.country}
        apiKey={this.API_KEY}
        pageSize={this.pageSize}
        category="business"
      />
    }
  />
  <Route
    path="/entertainment"
    element={
      <News
        country={this.country}
        apiKey={this.API_KEY}
        pageSize={this.pageSize}
        category="business"
      />
    }
  />
</Routes>

Answer 1

우리는 element 组件中添加一个唯一的 key 。每次都会用一些不同的 props에서 endcphpcn을 간단히 다시 렌더링할 수 있습니다.

으아아아

Answer 2

react-router/react-router-dom 通过保持安装相同的组件实例来优化渲染，即使它在多个路由上渲染。这是一种性能优化，可以节省卸载和重新安装同一组件的过程，而只是为了向其传递不同的 props 值。换句话说，即使路由发生变化，组件仍保持挂载状态，并且应该在 componentDidUpdate 生命周期方法或 useEffect 후크에서 종속성 소품 값 업데이트를 처리합니다.

전달되는 경로와 소품에 따라 이 News 组件确实对 category 소품은 제가 보기에 다른 유일한 소품이기 때문에 일부 종속성을 갖습니다.

News 组件可能应该有一个 useEffect 钩子，并依赖于此 category 이 다양한 속성 값을 기반으로 다양한 데이터를 실행/로드하는 속성입니다.

예:

으아아아

if News 是一个基于 React 类的组件，那么它应该实现 componentDidUpdate 방법.

으아아아

또한 이를 기반으로 카테고리 값에 따라 로직을 다시 실행하는 category 和 URL 路径似乎也匹配，在大多数情况下，您还可以通过使用以下命令渲染单个路由来使代码更加干燥：类别作为路由路径参数，并应用相同的 useEffect 후크 로직 덕분입니다.

예:

으아아아 으아아아

마찬가지로 News 是类组件，则使用适当的 componentDidUpdate 生命周期方法并实现自定义 withRouter 高阶组件，以便将 category 경로 경로 매개변수가 props로 주입되는 경우입니다.

구성 요소에서 React 키를 사용하는 것은 News 최후의 수단으로만 사용해야 합니다. 여기에는 구성 요소 마운트 해제 및 다시 마운트와 같은 실제 분해가 포함되며 단순히 업데이트된 prop 값으로 구성 요소를 다시 렌더링하는 것보다 더 많은 작업이 필요합니다.