React实现定时无限轮播切换组件及React Router实现咨询

你要的无限轮播切换组件的功能不需要引入React Router，用React原生的状态和定时器就能实现，实现逻辑如下：

1. 用useState维护当前展示组件的数组下标
2. 用useEffect在组件挂载时启动间隔5秒的定时器，每次触发时更新下标，当下标走到数组末尾时自动归零实现无限循环
3. 组件卸载时清除定时器，避免内存泄漏

修改后的完整代码 #

import { useState, useEffect } from 'react';
import cenLogo from "./images/CKBRlogo.jpg";
import "./index.css";
import "./App.css";
import Weather from "./components/weather";
import SnowMan from "./components/snowMan";

function App() {
  const toShow = [<Weather/>, <SnowMan/>]
  // 维护当前显示的组件下标
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    // 启动5秒间隔的定时器
    const timer = setInterval(() => {
      setCurrentIndex(prev => {
        // 到数组末尾就回到第一个，实现无限循环
        return prev === toShow.length - 1 ? 0 : prev + 1
      })
    }, 5000)
    // 卸载时清除定时器
    return () => clearInterval(timer)
  }, [toShow.length])

  return (
    <div className="App bg-gray-200 h-screen w-full p-6 font-sansImported ">
      <div className="h-2/3">
        <img alt="mainLogo" src={cenLogo} className=" rounded mx-auto" height="10" width="90" />
        <h1 className="text-centaraGold text-5xl mt-6 mb-6">What is up today?</h1>
        {/* 替换成动态取当前下标的组件 */}
        {toShow[currentIndex]}
        <footer className="fixed bottom-0 w-screen text-gray-500 text-xs">
          <p >Made by Florent Hebinger</p>
        </footer>
      </div>
    </div>
  );
}

export default App;

可以，但完全不推荐。
如果硬要使用React Router实现的话，你需要给每个组件配置单独的路由规则，再通过定时器动态切换路由地址，这种方案会改变页面URL，还需要额外引入路由依赖、配置路由表，对于你这种单页内纯组件切换的场景会增加不必要的复杂度，没有必要使用。

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