在构建时无法在我的React应用程序中看到该组件

我正在使用CoinGecko API构建一个加密追踪器应用程序。这是我的应用程序组件。

import Navbar from "./components/Navbar";
import Home from "./components/Home";
import { Route, Routes } from "react-router-dom";
import Show from "./components/Show";

function App() {
  return (
    <>
      <Navbar />
      <Routes>
        <Route index element={<Home />} />
        <Route path="/show" element={<Show />} />
      </Routes>
    </>
  );
}

export default App;

这是我的index.js文件:

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { BrowserRouter } from "react-router-dom";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

这是我的导航栏组件:

import React from "react";
import { Link } from "react-router-dom";

function Navbar() {
  return (
    <>
      <div className="nav_container">
        <div className="nav">
          <div className="navigation_menu">
            <Link to="/" className="nav_heading">
              Coiner
            </Link>
            <ul>
              <li>Home</li>
              <li>Pricing</li>
              <li>Features</li>
              <li>About</li>
              <li>Contact</li>
            </ul>
          </div>
          <div className="nav_button">
            <button>Login</button>
          </div>
        </div>
      </div>
    </>
  );
}

export default Navbar;

这是我的主页组件:

import React, { useEffect, useState } from "react";
import axios from "axios";
import Coin from "./Coin";
import Query from "./Query";

function Home() {
  const [coins, setCoins] = useState();
  const [query, setQuery] = useState("");
  const [components, setComponents] = useState(true);
  const [queryCoins, setQueryCoins] = useState();
  const [heading, setHeading] = useState("Trending Coins");
  useEffect(() => {
    window.scrollTo(0, 0);
    const getCoins = async () => {
      const response = await axios.get(
        "https://api.coingecko.com/api/v3/search/trending"
      );
      const result = response.data.coins;
      setCoins(result);
    };
    getCoins();
  }, []);
  const handleQueryChange = (event) => {
    const new_value = event.target.value;
    if (new_value === "") {
      setComponents(true);
      setHeading("Trending Coins");
    }
    setQuery(event.target.value);
  };
  const handleQuery = async () => {
    const response = await axios.get(
      `https://api.coingecko.com/api/v3/search?query=${query}`
    );
    const result = response.data.coins;
    setQueryCoins(result);
    setComponents(false);
    setHeading("Search Results");
  };
  const handleKeyChange = (event) => {
    if (event.key === "Enter") {
      handleQuery();
    }
  };
  return (
    <>
      <div className="outer_home_container">
        <div className="input_container">
          <input
            type="text"
            className="search_input"
            placeholder="Search for coins..."
            value={query}
            onChange={handleQueryChange}
            onKeyDown={handleKeyChange}
            maxLength={20}
          />
          <button onClick={handleQuery} className="input_button">
            <i className="fa-solid fa-magnifying-glass"></i>
          </button>
        </div>
        <h1>{heading}</h1>
        <div className="container">
          {components ? (
            coins ? (
              coins.map((key) => {
                return <Coin coin={key} key={key.item.id} />;
              })
            ) : (
              <h2>Loading...</h2>
            )
          ) : queryCoins ? (
            queryCoins.map((key) => {
              return <Query coin={key} key={key.id} />;
            })
          ) : (
            <h2>Loading...</h2>
          )}
        </div>
      </div>
    </>
  );
}

export default Home;

主要问题是当我运行我的应用程序时 npm run start ,它成功地渲染了所有组件,即Navbar和Home。但在我通过构建应用程序之后 npm run build 并通过实时服务器运行网站,它只渲染导航栏组件,要渲染主页组件,我必须单击Coiner徽标,然后,只有这样,它才能成功地将主页组件和我的导航栏组件一起渲染。

很抱歉在格式上犯了任何错误,我是Stackoverflow Q&像

在构建应用程序之前,我尝试编辑我的package.json文件。

这是代码:

{
  "name": "app",
  "homepage": "./",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.6.3",
    "lodash": "^4.17.21",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.21.1",
    "react-scripts": "5.0.1",
    "recharts": "^2.10.3",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

我把主页改成了“./”,但没用。

这是 website's link .

如有任何帮助,我们将不胜感激。