React+Django视频播放器实现无页面重载的组件路由切换

完全可以实现单页内的路由切换，不需要整页刷新——React Router的Link本来就是干这个的，你遇到的问题主要出在路径格式错误和组件未响应路由参数变化上，咱们一步步解决：

1. 先修正Link的路径格式 #

你当前写的<Link to='app/1' replace>是相对路径，会基于当前URL拼接（比如当前在/app/2，点击后会变成/app/2/app/1，这显然不是你想要的）。改成绝对路径就能解决URL更新异常的问题：

<div>
  <Link to='/app/1' replace> Previous Video </Link>
</div>

这样点击后URL会正确更新为/app/1，而且完全不会触发整页刷新——这是React Router的默认行为，放心用。

2. 让Player组件响应路由参数变化 #

问题的核心：当路由参数（/:number）变化时，Route不会重新挂载Player组件，只会更新它的props。如果你的Player只在初始化阶段加载视频，参数变化后就不会自动加载新内容，看起来就像没更新一样。

如果你用的是类组件： #

在Player里添加componentDidUpdate钩子，监听路由参数的变化：

class Player extends React.Component {
  componentDidMount() {
    // 初始加载视频
    this.loadVideo(this.props.match.params.number);
  }

  componentDidUpdate(prevProps) {
    // 对比前后的路由参数，变化时重新加载视频
    if (this.props.match.params.number !== prevProps.match.params.number) {
      this.loadVideo(this.props.match.params.number);
      // 别忘了重置播放状态，比如进度条归零、暂停播放等
      this.resetPlayerState();
    }
  }

  // 自定义视频加载逻辑
  loadVideo(videoNumber) {
    // 调用Django后端接口获取对应视频地址，更新播放器源
  }

  resetPlayerState() {
    // 重置播放器状态的逻辑
  }

  render() {
    // ...你的播放器渲染代码
  }
}

如果你用的是函数组件： #

用useParams钩子获取路由参数，再用useEffect监听参数变化：

import { useParams } from 'react-router-dom';
import { useEffect, useRef } from 'react';

function Player() {
  const { number } = useParams();
  const playerRef = useRef(null); // 用ref获取播放器DOM元素

  useEffect(() => {
    // 加载新视频
    loadVideo(number);
    // 重置播放状态
    if (playerRef.current) {
      playerRef.current.currentTime = 0;
      playerRef.current.pause();
    }
  }, [number]); // 依赖number参数，参数变化时自动触发

  const loadVideo = (videoNumber) => {
    // 调用后端接口获取视频地址，更新播放器源
  };

  return (
    // ...你的播放器JSX，比如<video ref={playerRef} />
  );
}

3. 可选：不依赖URL的视频切换方案 #

如果你不在乎URL是否变化，也可以不用路由参数，通过状态管理来控制视频切换：

在App.js里维护当前视频的状态，把状态和更新方法传给Player：

class App extends React.Component {
  state = {
    currentVideo: 1,
  };

  switchVideo = (videoNumber) => {
    this.setState({ currentVideo: videoNumber });
  };

  render() {
    return (
      <Row id="app-container" className="h-100 justify-content-center align-items-center">
        <Route 
          path='/app/:number' 
          render={(props) => (
            <Player 
              {...props} 
              currentVideo={this.state.currentVideo}
              switchVideo={this.switchVideo}
            />
          )} 
        />
      </Row>
    );
  }
}

然后在Queue.js里直接调用切换方法：

<div>
  <button onClick={() => this.props.switchVideo(1)}>Previous Video</button>
</div>

这种方式下，URL可以保持不变，只要Player监听currentVideo的变化，就能自动加载新视频。

最后确认 #

React Router的Link绝对不会触发整页刷新，只要路径正确，组件能响应参数/状态变化，就能实现流畅的无刷新视频切换。你之前的问题就是路径相对导致URL错误，加上组件没监听参数变化，所以看起来没效果~

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