ReactJS仅第一次重定向

Question

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

App.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;

Page.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;

Answer 1

实现这一点的一种方法是切换到使用history.push和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;

Answer 2

您肯定应该使用Steven Than提到的历史推送方法，但这里最大的问题是您只需要它发生一次。

如果您希望它只发生一次，那么我建议使用localStorage来跟踪布尔标志。如果希望每个会话发生一次，请使用sessionStorage。

我建议添加直接执行重定向到Home组件的代码，这样就不必添加额外的条件。

主页.jsx

import React, { useEffect } from "react";
import { useHistory } from "react-router-dom";
const Home = () => {
const history = useHistory();
useEffect(() => {
const key = "redirectOccured";
// Use truthy property - if key not in localstorage, then it'll be null
// otherwise it'll be truthy if set with a string of length > 0
if (localStorage.getItem(key)) {
return;
}
const timeoutId = setTimeout(() => {
localStorage.setItem(key, "redirected");
history.push("/about");
}, 5000);
return () => {
clearTimeout(timeoutId);
};
}, []);
return <div>Home</div>;
};

你可以根据你想做的事情，很容易地用sessionStorage取代localStorage