CODEWITHSUNDEEP
reactjs
bysiuxvx
bysiuxvx

Reputation: 75

ReactJS Redirect only the first time

The code below works in the way that after 5 seconds the page gets switched from Home to About. But it's impossible to get back to home afterwards. I would like it to only redirect to About the first time, and be able to return to Home without being redirected again. Can you suggest me something?

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;

Upvotes: 0

Views: 1258

Answers (2)

Zachary Haber
Zachary Haber

Reputation: 11047

You definitely should work with the history push approach that Steven Than mentioned, but the biggest problem here is that you need it to only occur once.

If you want it to only occur once ever, then I'd suggest using localStorage to keep track of a boolean flag. If you want it to occur once per session, then use sessionStorage.

I'd suggest adding the code to perform the redirect to the Home component directly so you don't have to add extra conditionals.

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>;
};

You can easily replace localStorage with sessionStorage based on what you want to do.

Upvotes: 1

Steven Than
Steven Than

Reputation: 454

One way to achieve this is to switch to use history.push and 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;

Upvotes: 1

Related Questions