How to redirect to another page after an animation in React and typescript

Asked

Viewed 14 times

0

I’m trying to send the user to the login page after an initial animation that takes 2 seconds to run, so I did a 3-second setTimeout to redirect to the login page. But it says that the web page could not be loaded at http://localhost/pages/Login.tsx and gives a net::ERR_INVALID_RESPONSE. And when I open Chrome Inspect is 404. I’m using Ionic + React + typescript.

Here’s the 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(
    <IonApp class="app">
      
      <a id="goToLogin" href="/src/pages/Login.tsx"></a>
      
      <div>
        <svg id="core-logo" width="117" height="60" viewBox="0 0 307 157" fill="#fff" xmlns="http://www.w3.org/2000/svg">
        <path d="M67.824 78.088H88.56C88.56 83.08 87.744 87.544 86.112 91.48C84.48 95.416 82.224 98.776 79.344 101.56C76.464 104.344 73.056 106.456 69.12 107.896C65.184 109.432 60.912 110.2 56.304 110.2H36.864C33.696 110.2 30.336 109.72 26.784 108.76C23.232 107.8 19.92 106.168 16.848 103.864C13.872 101.656 11.376 98.68 9.36 94.936C7.344 91.096 6.336 86.344 6.336 80.68V38.056C6.336 33.544 7.104 29.32 8.64 25.384C10.272 21.352 12.576 17.896 15.552 15.016C18.528 12.04 22.128 9.688 26.352 7.96C30.672 6.232 35.472 5.368 40.752 5.368H56.592C60.528 5.368 64.128 5.992 67.392 7.24C70.752 8.39199 73.728 10.024 76.32 12.136C78.912 14.152 81.12 16.6 82.944 19.48C84.864 22.36 86.4 25.48 87.552 28.84L67.824 35.032C66.576 32.344 64.752 30.184 62.352 28.552C60.048 26.824 57.504 25.96 54.72 25.96H43.776C41.28 25.96 39.12 26.44 37.296 27.4C35.472 28.264 33.936 29.416 32.688 30.856C31.536 32.296 30.672 33.928 30.096 35.752C29.52 37.576 29.232 39.448 29.232 41.368V75.784C29.232 78.184 29.376 80.392 29.664 82.408C30.048 84.328 30.72 86.008 31.68 87.448C32.64 88.888 33.936 90.04 35.568 90.904C37.296 91.672 39.504 92.056 42.192 92.056H54.432C58.848 92.056 62.112 90.712 64.224 88.024C66.336 85.24 67.536 81.928 67.824 78.088ZM121.157 110.2C118.085 110.2 115.109 109.768 112.229 108.904C109.445 108.04 106.997 106.696 104.885 104.872C102.773 103.144 101.093 100.936 99.8449 98.248C98.5969 95.464 97.9729 92.2 97.9729 88.456V62.824C97.9729 59.848 98.6449 57.064 99.9889 54.472C101.429 51.88 103.301 49.624 105.605 47.704C108.005 45.784 110.789 44.296 113.957 43.24C117.125 42.184 120.485 41.656 124.037 41.656H132.965C136.997 41.656 140.645 42.232 143.909 43.384C147.269 44.536 150.149 46.072 152.549 47.992C154.949 49.912 156.773 52.216 158.021 54.904C159.365 57.592 160.037 60.424 160.037 63.4V89.896C160.037 92.872 159.509 95.608 158.453 98.104C157.397 100.6 155.861 102.712 153.845 104.44C151.829 106.264 149.429 107.656 146.645 108.616C143.861 109.672 140.741 110.2 137.285 110.2H121.157ZM132.245 97.096C133.877 97.096 135.269 96.808 136.421 96.232C137.669 95.56 138.677 94.792 139.445 93.928C140.309 92.968 140.933 91.96 141.317 90.904C141.701 89.752 141.893 88.648 141.893 87.592V67.144C141.893 64.84 140.933 62.632 139.013 60.52C137.189 58.312 134.597 57.208 131.237 57.208H127.205C125.861 57.208 124.517 57.4 123.173 57.784C121.925 58.168 120.725 58.792 119.573 59.656C118.517 60.424 117.653 61.432 116.981 62.68C116.309 63.928 115.973 65.464 115.973 67.288V86.872C115.973 87.64 116.069 88.648 116.261 89.896C116.549 91.048 117.029 92.152 117.701 93.208C118.469 94.264 119.477 95.176 120.725 95.944C122.069 96.712 123.749 97.096 125.765 97.096H132.245ZM224.429 41.368V59.656C222.413 59.656 220.061 59.752 217.373 59.944C214.685 60.136 211.805 60.568 208.733 61.24C205.661 61.816 202.541 62.728 199.373 63.976C196.205 65.224 193.133 66.952 190.157 69.16V110.2H170.429V41.656H190.157V51.304C191.597 50.248 193.373 49.144 195.485 47.992C197.597 46.84 200.045 45.832 202.828 44.968C205.708 44.008 208.925 43.192 212.477 42.52C216.125 41.848 220.109 41.464 224.429 41.368ZM267.392 41.656C270.752 41.656 273.968 42.184 277.04 43.24C280.112 44.296 282.8 45.784 285.104 47.704C287.504 49.624 289.376 52.024 290.72 54.904C292.16 57.688 292.88 60.808 292.88 64.264V80.536H250.112V87.16C250.112 88.024 250.256 89.08 250.544 90.328C250.928 91.576 251.552 92.776 252.416 93.928C253.28 94.984 254.48 95.896 256.016 96.664C257.552 97.432 259.52 97.816 261.92 97.816H267.536C274.448 97.816 277.904 94.648 277.904 88.312H294.176V92.632C294.176 96.088 293.504 98.968 292.16 101.272C290.816 103.48 289.04 105.256 286.832 106.6C284.624 107.944 282.08 108.856 279.2 109.336C276.32 109.912 273.344 110.2 270.272 110.2H256.448C254.048 110.2 251.552 109.864 248.96 109.192C246.464 108.52 244.064 107.368 241.76 105.736C239.552 104.2 237.632 102.136 236 99.544C234.368 96.856 233.264 93.592 232.688 89.752V64.264C232.688 61.096 233.408 58.168 234.848 55.48C236.288 52.696 238.208 50.296 240.608 48.28C243.008 46.168 245.792 44.536 248.96 43.384C252.224 42.232 255.632 41.656 259.184 41.656H267.392ZM250.112 69.736H276.464V65.416C276.464 64.168 276.128 62.968 275.456 61.816C274.88 60.568 274.064 59.512 273.008 58.648C271.952 57.688 270.752 56.968 269.408 56.488C268.064 55.912 266.72 55.624 265.376 55.624H260.768C259.424 55.624 258.08 55.912 256.736 56.488C255.488 56.968 254.336 57.688 253.28 58.648C252.32 59.512 251.552 60.568 250.976 61.816C250.4 62.968 250.112 64.168 250.112 65.416V69.736Z" fill="white"/>
        <path d="M152.304 139.532L146.832 138.236C145.32 137.876 144.228 137.264 143.556 136.4C142.884 135.512 142.548 134.288 142.548 132.728C142.548 130.448 143.196 128.768 144.492 127.688C145.812 126.608 147.852 126.068 150.612 126.068C151.764 126.068 152.796 126.128 153.708 126.248C154.644 126.344 155.508 126.5 156.3 126.716V129.488C155.292 129.248 154.332 129.08 153.42 128.984C152.508 128.888 151.56 128.84 150.576 128.84C148.728 128.84 147.432 129.116 146.688 129.668C145.944 130.196 145.572 131.144 145.572 132.512C145.572 133.376 145.74 134.036 146.076 134.492C146.436 134.924 147.012 135.236 147.804 135.428L153.24 136.724C155.16 137.18 156.432 137.828 157.056 138.668C157.704 139.484 158.028 140.756 158.028 142.484C158.028 144.956 157.38 146.708 156.084 147.74C154.812 148.772 152.784 149.288 150 149.288C148.536 149.288 147.12 149.192 145.752 149C144.408 148.808 143.34 148.556 142.548 148.244V145.364C143.676 145.7 144.876 145.964 146.148 146.156C147.42 146.324 148.704 146.408 150 146.408C151.8 146.408 153.06 146.144 153.78 145.616C154.5 145.088 154.86 144.068 154.86 142.556C154.86 141.62 154.68 140.948 154.32 140.54C153.984 140.108 153.312 139.772 152.304 139.532ZM177.141 140.072C177.141 143.432 176.517 145.808 175.269 147.2C174.045 148.592 171.933 149.288 168.933 149.288C165.837 149.288 163.689 148.616 162.489 147.272C161.289 145.928 160.689 143.528 160.689 140.072C160.689 136.688 161.301 134.312 162.525 132.944C163.773 131.552 165.909 130.856 168.933 130.856C172.029 130.856 174.165 131.528 175.341 132.872C176.541 134.216 177.141 136.616 177.141 140.072ZM163.641 140.036C163.641 142.676 163.989 144.428 164.685 145.292C165.381 146.132 166.797 146.552 168.933 146.552C170.997 146.552 172.389 146.108 173.109 145.22C173.829 144.308 174.189 142.58 174.189 140.036C174.189 137.396 173.841 135.656 173.145 134.816C172.473 133.952 171.069 133.52 168.933 133.52C166.845 133.52 165.441 133.964 164.721 134.852C164.001 135.74 163.641 137.468 163.641 140.036ZM184.016 125.06V149H181.063V125.06H184.016ZM194.523 149.288C192.555 149.288 191.079 148.796 190.095 147.812C189.111 146.828 188.619 145.352 188.619 143.384V131.216H191.571V143.024C191.571 144.248 191.883 145.136 192.507 145.688C193.131 146.24 194.115 146.516 195.459 146.516C196.275 146.516 197.091 146.42 197.907 146.228C198.747 146.012 199.587 145.688 200.427 145.256V131.216H203.379V149H200.679L200.535 147.524H200.463C199.215 148.172 198.135 148.628 197.223 148.892C196.311 149.156 195.411 149.288 194.523 149.288ZM219.222 153.14C219.222 154.124 218.898 154.844 218.25 155.3C217.626 155.78 216.606 156.02 215.19 156.02C214.398 156.02 213.63 155.972 212.886 155.876C212.142 155.804 211.638 155.708 211.374 155.588V153.752C211.638 153.848 212.094 153.932 212.742 154.004C213.414 154.1 214.074 154.148 214.722 154.148C215.418 154.148 215.898 154.064 216.162 153.896C216.45 153.752 216.594 153.476 216.594 153.068C216.594 152.732 216.426 152.48 216.09 152.312C215.754 152.168 215.202 152.096 214.434 152.096C214.146 152.096 213.786 152.108 213.354 152.132C212.922 152.156 212.694 152.168 212.67 152.168L213.246 149.252C211.086 149.108 209.55 148.352 208.638 146.984C207.75 145.592 207.306 143.288 207.306 140.072C207.306 136.736 207.966 134.372 209.286 132.98C210.606 131.564 212.85 130.856 216.018 130.856C216.714 130.856 217.338 130.88 217.89 130.928C218.466 130.952 219.198 131.024 220.086 131.144V133.772C219.198 133.652 218.466 133.58 217.89 133.556C217.338 133.532 216.714 133.52 216.018 133.52C213.762 133.52 212.238 133.988 211.446 134.924C210.654 135.836 210.258 137.552 210.258 140.072C210.258 142.592 210.57 144.308 211.194 145.22C211.818 146.108 213.018 146.552 214.794 146.552C215.778 146.552 216.798 146.456 217.854 146.264C218.91 146.048 219.81 145.784 220.554 145.472V147.956C220.05 148.244 219.342 148.508 218.43 148.748C217.542 148.988 216.594 149.144 215.586 149.216L215.262 150.692C216.558 150.644 217.542 150.824 218.214 151.232C218.886 151.664 219.222 152.3 219.222 153.14ZM239.438 140.072C239.438 143.432 238.814 145.808 237.566 147.2C236.342 148.592 234.23 149.288 231.23 149.288C228.134 149.288 225.986 148.616 224.786 147.272C223.586 145.928 222.986 143.528 222.986 140.072C222.986 136.688 223.598 134.312 224.822 132.944C226.07 131.552 228.206 130.856 231.23 130.856C234.326 130.856 236.462 131.528 237.638 132.872C238.838 134.216 239.438 136.616 239.438 140.072ZM225.938 140.036C225.938 142.676 226.286 144.428 226.982 145.292C227.678 146.132 229.094 146.552 231.23 146.552C233.294 146.552 234.686 146.108 235.406 145.22C236.126 144.308 236.486 142.58 236.486 140.036C236.486 137.396 236.138 135.656 235.442 134.816C234.77 133.952 233.366 133.52 231.23 133.52C229.142 133.52 227.738 133.964 227.018 134.852C226.298 135.74 225.938 137.468 225.938 140.036ZM234.506 124.376H236.522C236.522 125.768 236.27 126.86 235.766 127.652C235.286 128.444 234.578 128.84 233.642 128.84C233.21 128.84 232.778 128.744 232.346 128.552C231.914 128.336 231.362 127.928 230.689 127.328C230.234 126.896 229.898 126.62 229.682 126.5C229.466 126.38 229.262 126.32 229.07 126.32C228.686 126.32 228.398 126.512 228.206 126.896C228.014 127.28 227.918 127.88 227.918 128.696H225.902C225.902 127.304 226.154 126.212 226.658 125.42C227.162 124.628 227.882 124.232 228.818 124.232C229.25 124.232 229.682 124.34 230.114 124.556C230.546 124.748 231.098 125.144 231.77 125.744C232.25 126.176 232.598 126.452 232.814 126.572C233.03 126.692 233.234 126.752 233.426 126.752C233.786 126.752 234.05 126.572 234.218 126.212C234.41 125.828 234.506 125.216 234.506 124.376ZM256.716 145.544V148.028C256.092 148.364 255.168 148.664 253.944 148.928C252.744 149.168 251.52 149.288 250.272 149.288C247.488 149.288 245.496 148.568 244.296 147.128C243.096 145.688 242.496 143.312 242.496 140C242.496 136.808 243.12 134.492 244.368 133.052C245.616 131.588 247.608 130.856 250.344 130.856C252.888 130.856 254.712 131.432 255.816 132.584C256.92 133.712 257.472 135.608 257.472 138.272C257.472 138.752 257.46 139.196 257.436 139.604C257.412 140.012 257.364 140.504 257.292 141.08H245.484C245.508 143.048 245.904 144.452 246.672 145.292C247.464 146.132 248.82 146.552 250.74 146.552C251.772 146.552 252.852 146.456 253.98 146.264C255.108 146.072 256.02 145.832 256.716 145.544ZM254.772 137.876C254.748 136.292 254.4 135.176 253.728 134.528C253.056 133.856 251.928 133.52 250.344 133.52C248.568 133.52 247.308 133.904 246.564 134.672C245.844 135.416 245.484 136.736 245.484 138.632H254.736C254.736 138.584 254.736 138.476 254.736 138.308C254.76 138.116 254.772 137.972 254.772 137.876ZM267.41 133.52C265.874 133.52 264.806 133.7 264.206 134.06C263.63 134.42 263.342 135.152 263.342 136.256C263.342 136.832 263.474 137.276 263.738 137.588C264.026 137.876 264.47 138.068 265.07 138.164L269.642 138.848C271.082 139.064 272.09 139.52 272.666 140.216C273.242 140.888 273.53 141.956 273.53 143.42C273.53 145.484 273.038 146.984 272.054 147.92C271.07 148.832 269.438 149.288 267.158 149.288C265.79 149.288 264.518 149.216 263.342 149.072C262.166 148.928 261.194 148.736 260.426 148.496V145.724C261.194 145.964 262.13 146.168 263.234 146.336C264.362 146.48 265.514 146.552 266.69 146.552C268.178 146.552 269.198 146.336 269.75 145.904C270.302 145.472 270.578 144.704 270.578 143.6C270.578 142.904 270.422 142.4 270.11 142.088C269.798 141.752 269.234 141.524 268.418 141.404L263.846 140.72C262.694 140.552 261.83 140.108 261.254 139.388C260.702 138.668 260.414 137.624 260.39 136.256C260.39 134.384 260.942 133.016 262.046 132.152C263.174 131.288 264.902 130.856 267.23 130.856C268.19 130.856 269.054 130.88 269.822 130.928C270.614 130.976 271.442 131.072 272.306 131.216V133.844C271.682 133.748 270.95 133.676 270.11 133.628C269.27 133.556 268.37 133.52 267.41 133.52ZM293.79 127.208C293.79 130.12 293.054 132.328 291.582 133.832C290.142 135.304 288.014 136.04 285.198 136.04C282.318 136.04 280.158 135.304 278.718 133.832C277.278 132.36 276.558 130.152 276.558 127.208C276.558 124.328 277.294 122.152 278.766 120.68C280.238 119.176 282.398 118.424 285.246 118.424C288.094 118.424 290.222 119.16 291.63 120.632C293.07 122.072 293.79 124.264 293.79 127.208ZM291.582 127.208C291.582 124.904 291.054 123.208 289.998 122.12C288.974 121 287.39 120.44 285.246 120.44C283.07 120.44 281.454 121 280.398 122.12C279.374 123.208 278.862 124.904 278.862 127.208C278.862 129.48 279.374 131.16 280.398 132.248C281.454 133.336 283.07 133.88 285.246 133.88C287.39 133.88 288.974 133.336 289.998 132.248C291.054 131.16 291.582 129.48 291.582 127.208ZM283.758 128.744V132.008H281.694V122.312H285.15C286.654 122.312 287.694 122.584 288.27 123.128C288.878 123.64 289.182 124.44 289.182 125.528C289.182 126.328 289.006 126.984 288.654 127.496C288.302 127.976 287.774 128.312 287.07 128.504L289.422 132.008H286.83L284.862 128.744H283.758ZM287.07 125.528C287.07 125.08 286.926 124.744 286.638 124.52C286.35 124.296 285.854 124.184 285.15 124.184H283.758V127.016H285.15C285.854 127.016 286.35 126.904 286.638 126.68C286.926 126.424 287.07 126.04 287.07 125.528Z" fill="white"/>
        </svg>
      </div>
          
    </IonApp>
  );
};

export default App;

Here is the folder structure:

Estrutura de pastas

How can I direct to the login page?

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.