React Router v6点击导航栏链接仅URL变化，页面不切换问题求助

问题原因 #

1. 原生<a>标签的路由冲突：Navbar组件里的品牌链接和Home链接使用了原生<a>标签的href属性，这类标签会触发页面整页刷新，破坏单页应用的客户端路由逻辑，虽然你当前的主要问题是页面不切换，但这是需要修正的基础问题。
2. 组件复用导致内容未更新：核心问题出在News组件的生命周期逻辑。当路由切换时（比如从/到/business），React会复用已挂载的News组件实例（因为组件类型未变，仅传入的category props改变），如果数据获取逻辑只在componentDidMount中执行，新分类的数据不会被重新请求，导致页面内容保持不变；只有刷新页面时，组件才会重新挂载并执行componentDidMount获取新数据。

解决方案 #

步骤1：统一使用Link组件替换原生<a>标签 #

将Navbar中所有导航链接改为react-router-dom提供的Link组件，确保路由在客户端跳转：

// 修改后的Navbar组件
import React, { Component } from 'react'
import { Link } from 'react-router-dom';

export class Navbar extends Component {
  render() { 
    return (
      <div>
            <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
                <div className="container-fluid">
                    <Link className="navbar-brand" to="/">NewsMonkey</Link>
                    <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span className="navbar-toggler-icon"></span>
                    </button>
                    <div className="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul className="navbar-nav me-auto mb-2 mb-lg-0">
                        <li className="nav-item">
                        <Link className="nav-link" aria-current="page" to="/">Home</Link>
                        </li>
                        <li className="nav-item"><Link className="nav-link" to="/">General</Link></li>
                        <li className="nav-item"><Link className="nav-link" to="/business">Business</Link></li>
                        <li className="nav-item"><Link className="nav-link" to="/entertainment">Entertainment</Link></li>
                        <li className="nav-item"><Link className="nav-link" to="/health">Health</Link></li>
                        <li className="nav-item"><Link className="nav-link" to="/science">Science</Link></li>
                        <li className="nav-item"><Link className="nav-link" to="/sports">Sports</Link></li>
                        <li className="nav-item"><Link className="nav-link" to="/technology">Technology</Link></li>
                        
                    </ul>
                    </div> 
                </div>
            </nav>
      </div>
    )
  }
}

export default Navbar

步骤2：在News组件中监听props变化触发数据更新 #

添加componentDidUpdate生命周期方法，当category props变化时重新请求对应分类的数据：

// News组件关键修改部分
import React, { Component } from 'react'

export class News extends Component {
  constructor(props) {
    super(props);
    this.state = {
      articles: [],
      loading: false
    };
  }

  componentDidMount() {
    this.fetchNews();
  }

  // 监听props变化，重新获取数据
  componentDidUpdate(prevProps) {
    if (prevProps.category !== this.props.category) {
      this.fetchNews();
    }
  }

  fetchNews = async () => {
    this.setState({ loading: true });
    // 根据当前props的category请求对应数据
    const url = `https://newsapi.org/v2/top-headlines?country=${this.props.country}&category=${this.props.category}&apiKey=你的API_KEY&pageSize=${this.props.pageSize}`;
    const response = await fetch(url);
    const data = await response.json();
    this.setState({
      articles: data.articles,
      loading: false
    });
  }

  render() {
    // 你的组件渲染逻辑
    return (
      // 组件内容
    )
  }
}

export default News

补充说明 #

react-router-dom v6中，路由切换时若目标组件与当前组件类型一致，React会优先复用组件实例以提升性能，因此不会重复触发componentDidMount。通过componentDidUpdate监听关键props的变化，是类组件处理这类场景的标准方案。

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