ReactアプリがDOMを読み込んでいる間にローディングを表示する方法

コンポーネントの状態を使用する方法:

import React, { useState, useEffect } from 'react';
const App = () => {
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    // DOMの読み込みが完了したらローディングを非表示にする
    window.addEventListener('load', () => {
      setLoading(false);
    });
  }, []);
  return (
    <div>
      {loading ? <div>Loading...</div> : <YourAppContent />}
    </div>
  );
}
export default App;

React Suspenseを使用する方法:

import React, { Suspense } from 'react';
import YourAppContent from './YourAppContent';
const App = () => {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <YourAppContent />
      </Suspense>
    </div>
  );
}
export default App;

React Routerを使用する方法:

import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { createBrowserHistory } from 'history';
import YourAppContent from './YourAppContent';
import Loading from './Loading';
const history = createBrowserHistory();
const App = () => {
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    // DOMの読み込みが完了したらローディングを非表示にする
    history.listen(() => {
      setLoading(false);
    });
  }, []);
  return (
    <Router history={history}>
      <div>
        {loading ? <Loading /> : (
          <Switch>
            <Route exact path="/" component={YourAppContent} />
            {/* 他のルート */}
          </Switch>
        )}
      </div>
    </Router>
  );
}
export default App;

これらはいくつかの一般的な方法ですが、Reactアプリケーションでローディングを表示するための様々なアプローチがあります。具体的なニーズや状況に合わせて適切な方法を選択してください。