我正在使用CoinGecko API开发一款加密货币追踪应用。以下是相关组件代码：
这是我的App组件：
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>
);
这是我的Navbar组件：
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;
这是我的Home组件：
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 fetchTrendingCoins = async () => {
const response = await axios.get("https://api.coingecko.com/api/v3/search/trending");
const result = response.data.coins;
setCoins(result);
};
fetchTrendingCoins();
}, []);
const handleQueryChange = (event) => {
const newValue = event.target.value;
if (newValue === "") {
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) => (
<Coin coin={key} key={key.item.id} />
))
) : (
<h2>Loading...</h2>
)
) : queryCoins ? (
queryCoins.map((key) => (
<Query coin={key} key={key.id} />
))
) : (
<h2>Loading...</h2>
)}
</div>
</div>
</>
);
}
export default Home;
主要问题在于当我通过npm run start启动应用时，Navbar和Home组件都能够成功渲染。但是，在执行npm run build构建应用并使用本地服务器运行网站后，只渲染了Navbar组件，而要渲染Home组件，我需要点击Coiner图标，然后才能成功同时渲染Home组件和Navbar组件。
抱歉在此处格式上可能出现的任何错误，我是Stackoverflow问答的新手。
在构建应用之前，我尝试编辑了package.json文件。
以下是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"
]
}
}
我将homepage改为"./"，但这并没有解决问题。
这里是网站链接
非常感谢任何能够提供帮助的建议。