Code works in local dev and not in stackblitz and sandbox

Question

Goal:
Display the content of the code in relation to

<Router>
  {isAuthenticated ? authenticatedRoutes : nonAuthenticatedRoutes}
</Router>

Problem:
When I use codesandbox or Stackblitz it wont display the content. However, when I use my local computer with VS code. Same code that is used in my local development is the same for the sandbox and stackblitz. In the end the result display in local development but not in codesandbox stand stackblitz.

However, it creates a lot of message and error about

"Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render."

Question:
How should it be solved in order to be displayed at stackblitz and also not displaying many message.

Info:
*The foundation of the code is from this webpage (https://stackblitz.com/edit/react-ts-conditional-route-e9gscp)
*If you dont want to show the error message, exchange the code to

<div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>

Stackblitz:
https://stackblitz.com/edit/react-ts-xjaspz

Sandbox:
https://codesandbox.io/s/confident-swanson-uie1n1

Thank you!

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

App.tsx

import React, { useEffect, useState } from 'react';
import { BrowserRouter as Router, Link, Route, Routes, Navigate } from 'react-router-dom';
import Login from './Login';
import Home from './Home';


const App = () => {
  const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);

  useEffect(() => {

  }, [isAuthenticated]);

  const handle_login = () => {
    setIsAuthenticated(true);
  };

  const handle_logout = () => {
    setIsAuthenticated(false);
  };

  const authenticatedRoutes = (
    <React.Fragment>
      <Routes>
        <Route
        path="/home"
        element={<Home handle_logout={handle_logout} />}
        />
      </Routes>
      <Navigate to="/home" />
    </React.Fragment>
  );

  const nonAuthenticatedRoutes = (
    <React.Fragment>
      <Routes>
        <Route      
          path="/login"
          element={<Login handle_login={handle_login} />}
        />
      </Routes>
      <Navigate to="/login" />
      <br />
      <br />
    </React.Fragment>
  );

  return (
    <Router>
      {isAuthenticated ? authenticatedRoutes : nonAuthenticatedRoutes}
    </Router>
  );
};

export default App;

 *

{isAuthenticated ? authenticatedRoutes : nonAuthenticatedRoutes}

<div className="App">
  <h1>Hello CodeSandbox</h1>
  <h2>Start editing to see some magic happen!</h2>
</div>
 */

login.tsx

import React from "react";

interface LoginProps {
  handle_login: () => void;
}

const Login: React.FC<LoginProps> = props => {
  return (
    <React.Fragment>
      <title> Login </title>
      <div className="container">
        <strong>login page</strong> <br />
        <br />
        <button onClick={props.handle_login}> Login </button>
      </div>
    </React.Fragment>
  );
};

export default Login;

Home.tsx

import React from 'react';

interface HomeProps {
  handle_logout: () => void;
}

const Home: React.FC<HomeProps> = (props) => {
  return (
    <React.Fragment>
      <header>
        {/* <h2>Home </h2> */}

        <button slot="end" onClick={props.handle_logout}>
          {' '}
          Logout{' '}
        </button>
      </header>
      <title> Home </title>
      <div className="container">
        <strong>Home page</strong>
        <p>Click logout on the titlebar to logout </p>
      </div>
    </React.Fragment>
  );
};

export default Home;

score 0 · Accepted Answer · answered Mar 05 '22 at 22:44

https://stackblitz.com/edit/react-ts-eghbyc?file=index.tsx

App.tsx

import React, { useEffect, useState } from 'react';
import { BrowserRouter as Router, Route, Routes, Navigate  } from 'react-router-dom';
import Home from './Home';
import Login from './Login';

const App: React.FC = () => {
  const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);

  useEffect(() => {
    console.log('Authentication state - ', isAuthenticated);
  }, [isAuthenticated]);

  const handle_login = () => {
    setIsAuthenticated(true);
  };

  const handle_logout = () => {
    setIsAuthenticated(false);
  };

  const authenticatedRoutes = (
    <React.Fragment>
      <Routes>
        <Route
          path="/home"
          element={<Home handle_logout={handle_logout} />}
        />
        <Route
          path="*"
          element={<Navigate to="/home" />}
        />     
      </ Routes>
  
    </React.Fragment>
  );

  const nonAuthenticatedRoutes = (
    <React.Fragment>
      <Routes>
        <Route 
          path="/login"
          element={<Login handle_login={handle_login} />}
        />
      <Route
          path="*"
          element={<Navigate to="/login" />}
      />       
      </ Routes>
      <br />
      <br />
      <br />
      <br />
    </React.Fragment>
  );

  return (
    <Router>
      {/* <IonRouterOutlet> */}

      {isAuthenticated ? authenticatedRoutes : nonAuthenticatedRoutes}

      {/* </IonRouterOutlet> */}
    </Router>
  );
};

export default App;

Home.tsx

import React from 'react';

interface HomeProps { handle_logout: () => void; }

const Home: React.FC = (props) => { return ( <React.Fragment> {/*

Home

*/}

    <button slot="end" onClick={props.handle_logout}>
      {' '}
      Logout{' '}
    </button>
  </header>
  <title> Home </title>
  <div className="container">
    <strong>Home page</strong>
    <p>Click logout on the titlebar to logout </p>
  </div>
</React.Fragment>

); };

export default Home;

index.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Login.tsx

import React from "react";

interface LoginProps {
  handle_login: () => void;
}

const Login: React.FC<LoginProps> = props => {
  return (
    <React.Fragment>
      <title> Login </title>
      <div className="container">
        <strong>login page</strong> <br />
        <br />
        <button onClick={props.handle_login}> Login </button>
      </div>
    </React.Fragment>
  );
};

export default Login;

Code works in local dev and not in stackblitz and sandbox

1 Answers1

Home