如何在React中n秒后以编程方式滑动(使用过渡)到另一条路由？

npm install react-router-dom

import React, { useState, useEffect } from 'react';
import { useHistory } from 'react-router-dom';

const [shouldRedirect, setShouldRedirect] = useState(false);

const history = useHistory();

useEffect(() => {
  const timer = setTimeout(() => {
    setShouldRedirect(true);
  }, n * 1000);

  return () => clearTimeout(timer);
}, [n]);

{shouldRedirect && history.push('/target-route')}

import React, { useState, useEffect } from 'react';
import { useHistory } from 'react-router-dom';

const MyComponent = () => {
  const [shouldRedirect, setShouldRedirect] = useState(false);
  const history = useHistory();
  const n = 5; // 设置n秒

  useEffect(() => {
    const timer = setTimeout(() => {
      setShouldRedirect(true);
    }, n * 1000);

    return () => clearTimeout(timer);
  }, [n]);

  return (
    <div>
      {shouldRedirect && history.push('/target-route')}
      {/* 其他组件内容 */}
    </div>
  );
};

export default MyComponent;