I am building a cryptotracker app using the CoinGecko API. This is my App component.
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;
This is my index.js file:
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>
);
This is my Navbar component:
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;
This is my Home component:
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;
The main problem is that when I run my app through npm run start, it successfully renders all the components, that is Navbar and Home. but after I build my app through npm run build and run the website through live server, it only renders the Navbar component, and to render the Home component I have to click the Coiner logo, and then and only then it successfully renders the Home component and my Navbar component together.
Sorry for making any mistakes in the format, I am new to the Stackoverflow Q&As.
I tried editing my package.json file before building the application.
Here is the code:
{
"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"
]
}
}
I changed homepage to “./” but it did not work.
And here is the website’s link.
Any help would be appreciated.
