my-app/src/index.js

import React, {Suspense} from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import reportWebVitals from './reportWebVitals';
import {createBrowserRouter, RouterProvider, Route, Link} from "react-router-dom";
import {SnackbarProvider} from 'notistack';

const Home2 = React.lazy(() => import('./Home2'));
const App2 = React.lazy(() => import('./App2'));
const AI = React.lazy(() => import('./AI'));
const Signin = React.lazy(() => import('./Signin'));
const notFoundStyle = {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    height: '100vh',
    flexDirection: 'column',
    backgroundColor: '#f4f4f9',
    color: '#333',
    fontFamily: 'Arial, sans-serif',
    textAlign: 'center',
};
  const headingStyle = {
    fontSize: '4rem',
    fontWeight: 'bold',
    margin: '0',
};
  const subheadingStyle = {
    fontSize: '1.5rem',
    marginTop: '20px',
};
  const emojiStyle = {
    fontSize: '5rem',
    marginBottom: '20px',
};




function ErrorBoundary() {
  return ( 
<div style={notFoundStyle}>
<div style={emojiStyle}>🚫</div>
<h1 style={headingStyle}>小造同学遇到了一点麻烦</h1>
<p style={subheadingStyle}>请刷新页面重试,我们会积极尝试优化体验</p>
</div>)
}
const router = createBrowserRouter([
   {path: "/editor/qingdan/:id",
     element: (<Suspense fallback={<div></div>}><SnackbarProvider><App2></App2></SnackbarProvider></Suspense>),
     errorElement : (<ErrorBoundary />)
   },
   {path: "/editor/index.html",
   element: (<Suspense fallback={<div></div>}><Home2></Home2></Suspense>)
   },
   {path: "/editor/ai",
   element: (<Suspense fallback={<div></div>}><AI></AI></Suspense>)
   },
   {path: "/editor/signin",
   element: (<Suspense fallback={<div></div>}><Signin></Signin></Suspense>)
   },

]);
const root = ReactDOM.render(<RouterProvider router={router}/>, document.getElementById('root'));


// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();