Comment restituer le même composant en utilisant différents accessoires dans <Route> de React-Router

Question

Je veux le restituer chaque fois que j'ai un News 组件，它需要一些道具，并且每当我单击 <Link /> et l'accessoire de classe correspondant. Il met à jour l'URL mais ne restitue pas le composant.

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

Ce sont les miens <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

Nous pouvons simplement restituer element 组件中添加一个唯一的 key 。每次都会用一些不同的 propsendcphpcn dans .

    }
  />

Answer 2

react-router/react-router-dom 通过保持安装相同的组件实例来优化渲染，即使它在多个路由上渲染。这是一种性能优化，可以节省卸载和重新安装同一组件的过程，而只是为了向其传递不同的 props 值。换句话说，即使路由发生变化，组件仍保持挂载状态，并且应该在 componentDidUpdate 生命周期方法或 useEffect Gérez les mises à jour de la valeur des accessoires de dépendance dans les hooks.

En fonction de l'itinéraire et des accessoires passés, cet accessoire News 组件确实对 category a certaines dépendances, car c'est le seul accessoire que je vois qui est différent.

News 组件可能应该有一个 useEffect 钩子，并依赖于此 category propriété pour exécuter/charger des données différentes en fonction de cette valeur de propriété différente.

Exemple :

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

  ...
};

Méthode

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

  ...
};

De plus, sur cette base, grâce à category 和 URL 路径似乎也匹配，在大多数情况下，您还可以通过使用以下命令渲染单个路由来使代码更加干燥：类别作为路由路径参数，并应用相同的 useEffect la logique de hook pour réexécuter la logique qui dépend des valeurs de la catégorie.

Exemple :

  
    }
  />

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]);

  ...
};

De même si les paramètres du chemin d'itinéraire News 是类组件，则使用适当的 componentDidUpdate 生命周期方法并实现自定义 withRouter 高阶组件，以便将 category sont injectés comme accessoires.

L'utilisation des clés React News sur composants ne doit être utilisée qu'en dernier recours car elle implique un démontage réel, comme le démontage et le remontage du composant, ce qui nécessite plus de travail que le simple rendu du composant avec des valeurs d'accessoires mises à jour.