Code works in local dev and not in stackblitz and sandbox - react-tsx

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;

Answer 1

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;