代码在本地开发中工作，而不是在 stackblitz 和沙箱中工作

Question

目标：
显示相关代码内容

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

问题：
当我使用 codesandbox 或 Stackblitz 时，它不会显示内容。但是，当我使用带有 VS 代码的本地计算机时。在我的本地开发中使用的相同代码对于沙箱和 stackblitz 是相同的。最终结果在本地开发中显示，在codesandbox stand stackblitz 中没有显示。

但是，它会产生很多关于

的消息和错误

“警告：超过最大更新深度。当组件在 useEffect 中调用 setState 时可能会发生这种情况，但 useEffect 没有依赖项数组，或者依赖项之一在每次渲染时都会发生变化。”

问题：
应该如何解决才能在stackblitz上显示，又不显示很多消息。

信息：
*代码基础来自本网页(https://stackblitz.com/edit/react-ts-conditional-route-e9gscp)
*如果你不想显示错误信息，交换代码到

<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

沙盒：
https://codesandbox.io/s/confident-swanson-uie1n1

谢谢！

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;

 *

{已认证？ 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

从 'react' 导入 React；

界面 HomeProps { handle_logout: () => void; }

const 主页：React.FC = (props) => { return ( {/*

主页

*/}

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

); };

导出默认主页；

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;

代码在本地开发中工作，而不是在 stackblitz 和沙箱中工作

Code works in local dev and not in stackblitz and sandbox

react-tsx

主页