So rendern Sie dieselbe Komponente mit unterschiedlichen Requisiten in <Route> von React-Router

Question

Ich habe ein News 组件，它需要一些道具，并且每当我单击 <Link /> und die entsprechenden Klassen-Requisiten, die ich neu rendern lassen möchte. Es aktualisiert die URL, rendert die Komponente jedoch nicht erneut.

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

Das sind meine <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 值重新渲染组件需要更多的工作。