How to redirect to a new page in react and typescript after an animation

Question

I am trying to send the user to the login page after an initial animation has finished. It takes two seconds for the animation to execute so I set a settimeout that takes 3 seconds to execute but then it says that it is not possible to load the web page in http://localhost/pages/Login.tsx and it gives me a net::ERR_INVALID_RESPONSE error.

Here is my code:

import React, { useEffect } from 'react';
import { IonApp } from '@ionic/react';
import "./css/main.css";

/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';

/* Theme variables */
import './theme/variables.css';

const App: React.FC = () => {
  
  useEffect(() => {
    setTimeout(() => {
      console.log("set timeout")
      var goToLogin: HTMLElement = document.querySelector("#goToLogin") as HTMLElement;
      goToLogin?.click();
      // window.location = "/pages/Login.tsx";
    }, 3000);
  }, []);
  return(
    
      
      
      
      
        
      
          
    
  );
};

export default App;

How can I redirect to the login page? Here is my file structure:

UPDATED

Now my app looks like this:

const App: React.FC = () => {
  let history = useHistory();
  useEffect(() => {
    setTimeout(() => {
      history.push("/login");
    }, 3000);
  }, []);
  return(
    
      
        
          
        
      
      
      
        
      
          
    
  );
};

I also encapsulated the app component in BrowserRouter in index.tsx:

ReactDOM.render(
  
    
      
    
  ,
  document.getElementById('root')
);

UPDATE 2 Removed the router in index.tsx:

ReactDOM.render(
  
    {/*  */}
      
    {/*  */}
  ,
  document.getElementById('root')
);

And used:

useIonViewWillEnter(() => {
    setTimeout(() => {
      history.push("/login");
    }, 3000);
  });

Instead of useEffect.

Now I can navigate through the url bar in chrome inspect but every time I render a new page the App page renders again. And I get the following error:

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

user_9521040 · Answer

You need to use react-router-dom library to create such behavior for you app.

Here is an example of what you need to do to create a simple app with such routings.

First you need to create three files:

App.tsx
LoginPage.tsx
AnimationPage.tsx

App.tsx - is you router file where we will specify all routes and link them with components. Here we need BrowserRouter, Switch and Route components from react-router-dom.

// App.tsx
import { BrowserRouter, Switch, Route } from 'react-router-dom';

import AnimationPage from "./AnimationPage.tsx";
import LoginPage from "./LoginPage.tsx";

let App = () => {
  return (
    
      
        
        
      
    
  );
};

export default App;

LoginPage.tsx - simple page with one button that redirects us to the page with animation.

// LoginPage.tsx
import { Link } from "react-router-dom";

let LoginPage = () => {
  return (
    
      
    
  );
};

export default LoginPage;

AnimationPage - page with the same behavior as the page from your example. Here we need useHistory hook from react-router-dom to be able to redirect our app to particular page right from the function body.

// AnimationPage.tsx
import { useEffect } from "react";
import { useHistory } from "react-router-dom";

let AnimationPage = () => {
  let history = useHistory();
  useEffect(() => {
    setTimeout(() => {
      history.push(`/login`);
    }, 3000);
  }, []);
  return ;
};

All the docs for all hooks and components you can hind here.

Have fun!

How to redirect to a new page in react and typescript after an animation

1 Answers