Skip to main content
Info Crypto is a single-page application (SPA). All navigation happens client-side using React Router v7. The browser never makes a full-page reload when moving between sections — React Router intercepts link clicks and swaps the rendered component based on the current URL path.

​
Entry point

BrowserRouter is mounted at the very top of the React tree in src/main.jsx, wrapping the entire App component: 
// src/main.jsx
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.jsx";
import { BrowserRouter } from "react-router-dom";

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>
);
BrowserRouter uses the HTML5 History API (pushState / replaceState) to keep the URL bar in sync with the active view without triggering a server request.

​
Route configuration

All routes are declared in src/App.jsx inside a single <Routes> block: 
// src/App.jsx
import { Routes, Route } from "react-router-dom";
import { Home } from "./pages/home";
import { Favorites } from "./pages/favorites";
import { Grafics } from "./pages/grafics";
import { Navbar } from "./components/navbar";
import { News } from "./pages/news";
import { ConverterPage } from "./pages/converter";

function App() {
  return (
    <>
      <FavoritesProvider>
        <ColorModeProvider>
          <Navbar />

          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/grafics" element={<Grafics />} />
            <Route path="/favs" element={<Favorites />} />
            <Route path="/news" element={<News />} />
            <Route path="/converter" element={<ConverterPage />} />
          </Routes>
        </ColorModeProvider>
      </FavoritesProvider>
    </>
  );
}
<Navbar /> sits outside <Routes> so it is rendered on every page without being re-mounted on navigation.

​
Routes

Home

Path: /Component: HomeDisplays the top 20 cryptocurrencies ranked by market cap, fetched via keepInfo() from the caching layer.

Grafics

Path: /graficsComponent: GraficsInteractive price history charts. Fetches OHLC data for a selected coin and time range via keepHistory(cryptoId, days).

Favorites

Path: /favsComponent: FavoritesLists coins the user has starred. Reads from the FavoritesContext — no additional API call is needed if the coin data is already cached.

News

Path: /newsComponent: NewsSpanish-language market news fetched from CryptoCompare via keepNews(). Articles open in a new browser tab.

Converter

Path: /converterComponent: ConverterPageCurrency converter for a fixed set of coins. Spot prices are fetched via keepPrice() and used to calculate conversion amounts in real time.
The Navbar component provides the navigation links that move between routes. Because it is rendered outside <Routes> in App.jsx, it persists across every page transition and does not unmount when the active route changes. It also consumes useColorMode() to render the dark/light mode toggle.

​
Deployment consideration

Because React Router uses the HTML5 History API, deep links like https://your-app.netlify.app/news are valid URLs but do not correspond to physical files on the server. If a user bookmarks /news and navigates directly to it, the server must return index.html for React Router to take over.On Netlify, add a _redirects file at the project root:
/*  /index.html  200
This tells Netlify to serve index.html for any path, letting the client-side router handle the rest.

Build docs developers (and LLMs) love

Get started for freeTalk to us