时间戳

首页 > 解决方案 > ReactJS 仅重定向第一次

reactjs - ReactJS 仅重定向第一次

问题描述

下面的代码以 5 秒后页面从主页切换到关于的方式工作。但之后就不可能回家了。我希望它只在第一次重定向到 About，并且能够返回 Home 而不会再次被重定向。你能给我一些建议吗？

应用程序.js

import { HashRouter as Router } from 'react-router-dom';
import Navigation from './Navigation';
import Page from './Page';
import '../styles/app.css';

function App() {
  return (
    <div className="App">
      <Router>
        <Navigation />
        <Page />
      </Router>
    </div>
  );
}

export default App;

页面.js

import React, { useState, useRef, useEffect } from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';
import ProjectsList from './pages/ProjectsList';
import ErrorPage from './pages/ErrorPage';
import '../styles/page.css';

const Page = () => {
  const [redirect, setRedirect] = useState(false);

  let interval = useRef();

  const redirectCountdown = () => {
    if (!redirect) {
      let time = 0;
      interval = setInterval(() => {
        time++;

        if (time > 5) {
          setRedirect(true);
          clearInterval(interval.current);
        }
      }, 1000);
    }
  };
  useEffect(() => {
    redirectCountdown();
    return () => {
      clearInterval(interval.current);
    };
  });

  return (
    <main>
      <Switch>
        {redirect ? (
          <Route path="/" exact component={Home}>
            <Redirect to="/about" />
          </Route>
        ) : (
          <Route path="/" exact component={Home} />
        )}
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
        <Route path="/projects" component={ProjectsList} />
        <Route component={ErrorPage} />
      </Switch>
    </main>
  );
};

export default Page;

标签： reactjs

解决方案

实现此目的的一种方法是切换到使用history.pushand setTimeout：

import { useEffect } from 'react';
import { Route, Switch } from 'react-router-dom';
import { useHistory } from 'react-router';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';
import ProjectsList from './pages/ProjectsList';
import ErrorPage from './pages/ErrorPage';
import '../styles/page.css';

const Page = () => {
  const history = useHistory();

  useEffect(() => {
    const timeoutId = setTimeout(() => {
      history.push('/about');
    }, 5000);
    return () => clearTimeout(timeoutId);
  }, [history]);

  return (
    <main>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
        <Route path="/projects" component={ProjectsList} />
        <Route component={ErrorPage} />
      </Switch>
    </main>
  );
};

export default Page;

推荐阅读