在react-router的<Route>中如何使用不同的props渲染相同的元件

Question

我有一個News 元件，它需要一些道具，並且每當我點擊<Link /> 以及相應的類別道具時，我都想使其重新渲染。它會更新 URL，但不會重新呈現元件。

<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>

這些是我的 <NavLink />

<li className="nav-item">
  <NavLink className="nav-link" aria-current="page" to="/">
    Home
  </NavLink>
</li>
{this.props.categories.map((category) => {
  return (
    <li key={category} className="nav-item">
      <NavLink to={`/${category}`} className="nav-link">
        {category[0].toUpperCase() +
          category.slice(1, category.length)}
      </NavLink>
    </li>
  );
})}

Answer 1

我們可以簡單地在 element 元件中加入一個唯一的 key 。每次都會用一些不同的 props 重新渲染 endcphpcn。

    }
  />

Answer 2

react-router/react-router-dom 透過保持安裝相同的元件實例來最佳化渲染，即使它在多個路由上渲染。這是一種效能最佳化，可以節省卸載和重新安裝相同元件的過程，而只是為了向其傳遞不同的 props 值。換句話說，即使路由發生變化，元件仍保持掛載狀態，並且應該在 componentDidUpdate 生命週期方法或 useEffect 掛鉤中處理依賴項的 props 值更新。

根據路由和傳遞的道具，這個 News 元件確實對 category 道具有一些依賴，因為這是我看到的唯一不同的道具。

News 元件可能應該有一個 useEffect 鉤子，並依賴此 category 屬性來運行/載入基於此不同屬性值的任何不同資料。

範例：

const News = ({ apiKey, category, country, pageSize }) => {
  useEffect(() => {
    // a dependency value changed, rerun some logic
  }, [apiKey, category, country, pageSize]);

  ...
};

如果 News 是一個基於 React 類別的元件，那麼它應該實作 componentDidUpdate 方法。

class News extends React.Component {
  ...

  componentDidUpdate(prevProps) {
    const { apiKey, category, country, pageSize } = this.props;

    if (
      category !== prevProps.category
      /* || other props change conditions */ 
    ) {
      // a dependency value changed, rerun some logic
    }
  }

  ...
};

此外，基於此，由於category 和URL 路徑似乎也匹配，在大多數情況下，您還可以透過使用以下命令渲染單一路由來使程式碼更加乾燥：類別作為路由路徑參數，並應用相同的useEffect 鉤子邏輯來重新運行依賴類別值的邏輯。

範例：

  
    }
  />

import { useParams } from 'react-router-dom';

const News = ({ apiKey, country, pageSize }) => {
  const { category = "general" } = useParams();

  useEffect(() => {
    // a dependency value changed, rerun some logic
  }, [apiKey, category, country, pageSize]);

  ...
};

同樣，如果News 是類別元件，則使用適當的componentDidUpdate 生命週期方法並實作自訂withRouter 高階元件，以便將category 路由路徑參數作為prop 注入。

在News 元件上使用React 鍵只能作為最後的手段，因為它涉及實際的拆卸，例如卸載並重新掛載組件，這比簡單地使用更新的prop 值重新渲染元件需要更多的工作。