React Link修改URL路径但不自动加载页面问题求助

问题原因 #

点击Link后URL更新但页面无变化，核心原因是Detail组件未监听路由参数的变化。当通过React Router的客户端跳转时，Detail组件不会被重新挂载，仅路由参数（id）发生变化。如果组件仅在初始挂载时获取Firebase数据，参数更新时不会触发重新请求，导致页面内容未更新。

解决方案 #

1. 函数组件（推荐） #

在Detail组件中使用useParams获取路由参数，并将参数加入useEffect的依赖数组，确保参数变化时重新获取数据：

import { useParams, useEffect, useState } from 'react';
// 导入Firebase相关操作方法

function Detail() {
  const { id } = useParams();
  const [movie, setMovie] = useState(null);

  useEffect(() => {
    // 根据id从Firebase拉取对应数据
    const fetchMovieDetail = async () => {
      const movieDoc = await firebase.firestore().collection('movies').doc(id).get();
      if (movieDoc.exists) {
        setMovie(movieDoc.data());
      }
    };

    fetchMovieDetail();
  }, [id]); // 以id为依赖，参数变化时自动重新执行数据请求

  if (!movie) return <div>加载中...</div>;

  return (
    <div>
      <h1>{movie.title}</h1>
      <img src={movie.cardImg} alt={movie.title} />
      {/* 渲染其他详情内容 */}
    </div>
  );
}

export default Detail;

2. 类组件 #

如果使用类组件，在componentDidUpdate中对比前后路由参数，参数变化时重新获取数据：

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
// 导入Firebase相关操作方法

class Detail extends Component {
  state = {
    movie: null
  };

  componentDidMount() {
    this.fetchMovie(this.props.match.params.id);
  }

  componentDidUpdate(prevProps) {
    // 检测路由id是否变化
    if (prevProps.match.params.id !== this.props.match.params.id) {
      this.fetchMovie(this.props.match.params.id);
    }
  }

  fetchMovie = async (id) => {
    const movieDoc = await firebase.firestore().collection('movies').doc(id).get();
    if (movieDoc.exists) {
      this.setState({ movie: movieDoc.data() });
    }
  };

  render() {
    const { movie } = this.state;
    if (!movie) return <div>加载中...</div>;

    return (
      <div>
        <h1>{movie.title}</h1>
        <img src={movie.cardImg} alt={movie.title} />
        {/* 渲染其他详情内容 */}
      </div>
    );
  }
}

// 通过withRouter包裹组件，获取路由相关props
export default withRouter(Detail);

额外检查点 #

• 确认Movies.js已正确导入Link组件：import { Link } from 'react-router-dom'
• 你的App.js路由配置顺序正确，/detail/:id路由在根路由/之前，不会被根路由拦截

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