如何在React Router的<Route>中渲染带不同Props的同一组件？

问题场景 #

我有一个接收多个Props的<News>组件，点击对应分类的<NavLink>后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" {/* 这里category值写错了 */}
      />
    }
  />
</Routes>

导航链接代码：

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

问题原因及解决办法 #

1. 先修正路由中的明显错误 #

首先看到/entertainment路由里的category属性值写错成了business，先改成entertainment，确保传递的Props正确：

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

2. 强制组件重新渲染（核心解决办法） #

React会复用同一个组件实例当路由切换但组件类型相同时，所以即使Props变化，组件可能不会重新执行初始化逻辑（比如数据请求）。可以通过两种方式解决：

方式一：给News组件添加唯一key

给每个路由下的<News>组件设置唯一的key，让React识别为不同的组件实例，强制重新挂载：

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

方式二：在News组件内部监听Props变化

如果不想强制重新挂载组件，可以在News组件内部监听category属性的变化，触发对应逻辑：

• 若News是类组件，使用componentDidUpdate生命周期：

class News extends React.Component {
  componentDidUpdate(prevProps) {
    if (prevProps.category !== this.props.category) {
      // 这里执行分类变化后的逻辑，比如重新请求数据
      this.fetchNewsData(this.props.category);
    }
  }

  // 初始化时也请求数据
  componentDidMount() {
    this.fetchNewsData(this.props.category);
  }

  fetchNewsData(category) {
    // 你的数据请求逻辑
  }

  render() {
    // 渲染内容
  }
}

• 若News是函数组件，使用useEffect钩子：

import { useEffect } from 'react';

function News({ category, country, apiKey, pageSize }) {
  useEffect(() => {
    // 每次category变化时执行数据请求
    fetchNewsData(category);
  }, [category]); // 依赖项设为category

  const fetchNewsData = async (cat) => {
    // 你的数据请求逻辑
  };

  return (
    // 渲染内容
  );
}

3. 优化路由配置（可选） #

可以简化路由配置，不用写多个重复的Route，用动态路由参数传递分类：

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

<Routes>
  {/* 默认分类为general */}
  <Route path="/" element={<News country={this.country} apiKey={this.API_KEY} pageSize={this.pageSize} category="general" />} />
  {/* 动态匹配分类路由 */}
  <Route path="/:category" element={<News country={this.country} apiKey={this.API_KEY} pageSize={this.pageSize} category={useParams().category} />} />
</Routes>

这种方式下，同样需要给News组件加key（比如key={useParams().category}），或者在组件内部监听category变化，确保每次路由切换时组件更新。

内容的提问来源于stack exchange，提问作者iamWinn1