Bagaimana untuk membuat komponen yang sama menggunakan prop yang berbeza dalam <Route> react-router

Question

Saya mempunyai News 组件，它需要一些道具，并且每当我单击 <Link /> dan prop kelas yang sepadan yang ingin saya buat semula. Ia mengemas kini URL tetapi tidak memaparkan semula komponen.

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

Ini milik saya <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

Kita boleh render semula element 组件中添加一个唯一的 key 。每次都会用一些不同的 propsendcphpcn dalam .

    }
  />

Answer 2

react-router/react-router-dom 通过保持安装相同的组件实例来优化渲染，即使它在多个路由上渲染。这是一种性能优化，可以节省卸载和重新安装同一组件的过程，而只是为了向其传递不同的 props 值。换句话说，即使路由发生变化，组件仍保持挂载状态，并且应该在 componentDidUpdate 生命周期方法或 useEffect Kendalikan kemas kini nilai prop pergantungan dalam cangkuk.

Bergantung pada laluan dan prop yang dilalui, prop News 组件确实对 category ini mempunyai beberapa kebergantungan, kerana ia satu-satunya prop yang saya nampak berbeza.

News 组件可能应该有一个 useEffect 钩子，并依赖于此 category hartanah untuk menjalankan/memuatkan sebarang data berbeza berdasarkan nilai hartanah yang berbeza ini.

Contoh:

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

  ...
};

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

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

  ...
};

Selain itu, berdasarkan ini, terima kasih kepada category 和 URL 路径似乎也匹配，在大多数情况下，您还可以通过使用以下命令渲染单个路由来使代码更加干燥：类别作为路由路径参数，并应用相同的 useEffect logik cangkuk untuk menjalankan semula logik yang bergantung pada nilai kategori.

Contoh:

  
    }
  />

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

  ...
};

Begitu juga jika News 是类组件，则使用适当的 componentDidUpdate 生命周期方法并实现自定义 withRouter 高阶组件，以便将 category parameter laluan laluan disuntik sebagai prop.

Menggunakan kekunci React News pada komponen hanya boleh digunakan sebagai pilihan terakhir kerana ia melibatkan pembongkaran sebenar, seperti menyahlekap dan melekap semula komponen, yang memerlukan lebih banyak kerja daripada sekadar memaparkan semula komponen dengan nilai prop yang dikemas kini Work.