React+Bootstrap中Router实现短视频定时跳转主页失效问题排查

核心错误点 #

• 直接在定时器中调用React组件函数不会产生任何渲染效果，React组件只有被挂载到渲染树中才会生效，单纯函数调用返回的JSX没有被插入页面，完全不会执行路由逻辑
• 路由结构设计错误：BrowserRouter只需要在应用最外层包裹一次，不需要单独写在Redirect函数里重复嵌套；视频页和主页应该作为同级路由存在，而不是把路由配置写在跳转逻辑里
• 定时器用错：setInterval是每隔指定时间重复执行，延迟单次执行应该用setTimeout；定时器直接写在组件外层会导致重复触发、内存泄漏
• React Router v6版本做编程式跳转需要使用官方提供的useNavigate钩子，自定义返回路由结构的函数无法实现跳转效果

正确实现代码 #

首先调整入口文件（一般是src/index.js），在最外层统一包裹路由容器：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
// 引入Bootstrap样式
import 'bootstrap/dist/css/bootstrap.min.css';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

之后修改App.js，把路由配置和跳转逻辑写对：

import './App.css';
import React, { useEffect } from 'react';
import Vid from './assets/codingmonkeyvid.mp4';
import { Routes, Route, useNavigate } from 'react-router-dom';
import Secondary from './Secondary';

// 开场视频页组件
function IntroPage() {
  const navigate = useNavigate();

  useEffect(() => {
    // 5秒后单次触发跳转
    const timer = setTimeout(() => {
      // replace: true 会替换当前历史记录，用户点击返回不会回到开场视频页
      navigate('/home', { replace: true });
    }, 5000);

    // 组件卸载时清除定时器，避免内存泄漏
    return () => clearTimeout(timer);
  }, [navigate]);

  return (
    <div className="d-flex justify-content-center align-items-center vh-100">
      <video src={Vid} autoPlay muted id="myVid" className="w-auto max-vh-100" />
    </div>
  );
}

function App() {
  return (
    <Routes>
      <Route path="/" element={<IntroPage />} />
      <Route path="/home" element={<Secondary />} />
    </Routes>
  );
}

export default App;

体验优化 #

固定写死5秒跳转不够灵活，可以直接监听视频的播放结束事件，视频自然播完再跳转，适配不同时长的视频素材，只需要把video标签改成下面的写法即可，同时可以删掉之前的setTimeout逻辑：

<video 
  src={Vid} 
  autoPlay 
  muted 
  id="myVid" 
  className="w-auto max-vh-100"
  onEnded={() => navigate('/home', { replace: true })}
/>

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