在没有错误的情况下调试或查找丢失的组件，并且您用大写字母拼写错误？

问：

我有很多使用普通 JavaScript 的经验，但我只是在学习 React。我想了解如何在浏览器控制台中没有错误但未显示组件时调试或识别错误。我已经安装了 React DevTools 扩展，但我不确定它如何提供帮助 我有这个：注意元素中的大写字母“E”： ，

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { RouterProvider, createBrowserRouter } from "react-router-dom";
import ErrorPage from "./components/ErrorPage";
import Home from "./components/Home";
const router = createBrowserRouter([
  {
    path: "/",
    Element: <App />,
    errorElement: <ErrorPage />,
    children: [{ index: true, element: <Home /> }],
  },
]);
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
);

应用.js ：

import { Outlet } from "react-router-dom";
function App() { return ( <div className="container "> <div className="row"> <div className="col"> <h1 className="mt-3">Go watch movie</h1> </div> <div className="col text-end"> <a href="#!"><span className="badge bg-success">Login</span></a> </div> <hr className="md-3"></hr> </div>
  <div className="row">
    <div className="col-md-2">
      <nav>
        <div className="list-group">
          <a href="#!" className="list-group-item list-group-item-action">Home</a>
          <a href="#!" className="list-group-item list-group-item-action">Movies</a>
          <a href="#!" className="list-group-item list-group-item-action">Genres</a>
          <a href="#!" className="list-group-item list-group-item-action">Add Movie</a>
          <a href="#!" className="list-group-item list-group-item-action">Manage Catalogue</a>
          <a href="#!" className="list-group-item list-group-item-action">GraphQL</a>
        </div>
      </nav>          
    </div>
    <div className="col-md-10">
      <Outlet/>
    </div>
  </div>
</div>
); }
export default App;

“list-group”不会出现在浏览器中，直到我将元素从 修复到 。最让我担心的是浏览器中没有错误消息或任何内容可以帮助我找到问题。下次应该如何调试？<App/><App/>,