Frontend: Routing
Relevant source files
The following files were used as context for generating this wiki page:The frontend of the LLaMa Leaks application is a Single Page Application (SPA) that utilizes client-side routing to manage navigation between different views. The routing is built upon the react-router-dom library, which allows for a seamless user experience without full page reloads.
The core routing logic is defined within the main App.tsx component. It establishes all available paths and maps them to specific page components. The system is also integrated with Sentry for performance monitoring and error tracking related to navigation.
Core Architecture
The application's routing is encapsulated within a series of nested providers, ensuring that routing capabilities, state management, theming, and error handling are available throughout the component tree.
Sources: frontend/src/App.tsx:65-82
Component Hierarchy
The following diagram illustrates the high-level component structure that wraps the application's routes.
This diagram shows the wrapping of the Routes component, starting with Sentry's error boundary for crash protection.
Sources: frontend/src/App.tsx:65-82
Key Dependencies
The routing functionality relies on the react-router-dom package.
| Dependency | Version | Purpose |
|---|---|---|
react-router-dom | ^6.26.2 | Core library for client-side routing. |
Sources: frontend/package.json:54
Route Definitions
All application routes are centrally defined in App.tsx. The configuration uses a Routes component containing individual Route definitions for each page, including a catch-all route for handling 404 "Not Found" errors.
Sources: frontend/src/App.tsx:71-79
Defined Routes
The table below lists all the primary routes configured in the application.
| Path | Component | Description |
|---|---|---|
/ | Index | The main landing page of the application. |
/leaderboard | Leaderboard | Displays the leaderboard of exposed servers. |
/models | Models | Shows details about the models found. |
/pricing | Pricing | The pricing information page. |
/about | About | Provides information about the project. |
/privacy | Privacy | The privacy policy page. |
/legal | Legal | The legal information page. |
* (catch-all) | NotFound | Renders when no other route matches the URL. |
Sources: frontend/src/App.tsx:71-79
Routing Flow
The diagram below shows how a URL request is resolved to a specific page component.
This flowchart illustrates the matching process within the <Routes> component, culminating in the NotFound page if no specific path matches.
Sources: frontend/src/App.tsx:71-79
Navigation and Linking
Standard Navigation
Navigation between pages is primarily handled using standard anchor (<a>) tags. In some cases, UI components like Button from a component library are used for navigation by leveraging the asChild prop, which passes its properties down to the child <a> tag.
An example of this can be seen in the About.tsx component, where a button links to the "solutions" section on the homepage.
// frontend/src/pages/About.tsx:130-135
<Button size="sm" variant="outline" className="gap-1 flex-1" asChild>
<a href="/#solutions">
<BookOpen className="h-3 w-3" />
Learn More
</a>
</Button>
Sources: frontend/src/pages/About.tsx:130-135
Hash-based Scrolling
The application includes logic to handle scrolling to specific sections of a page based on the URL hash (e.g., /#solutions). The Index.tsx page uses the useLocation hook from react-router-dom to detect a hash in the URL and smoothly scroll the corresponding element into view.
This is implemented within a useEffect hook that triggers when location.hash changes. A short delay is introduced to ensure the DOM is fully rendered before attempting to scroll.
// frontend/src/pages/Index.tsx:21-29
useEffect(() => {
if (location.hash) {
// Small delay to ensure DOM is ready
setTimeout(() => {
const element = document.getElementById(location.hash.slice(1));
if (element) {
element.scrollIntoView({ behavior: "smooth" });
}
}, 100);
}
}, [location.hash]);
Sources: frontend/src/pages/Index.tsx:21-29, frontend/src/components/Solutions.tsx:4
The following sequence diagram demonstrates this flow:
Sources: frontend/src/pages/Index.tsx:21-29
Sentry Integration
Routing is automatically tracked by Sentry for performance monitoring and error analysis. This is achieved by wrapping the standard BrowserRouter from react-router-dom with a Sentry-specific higher-order component.
// frontend/src/App.tsx:21
const SentryBrowserRouter = Sentry.withSentryReactRouterV6Routing(BrowserRouter);
This SentryBrowserRouter is then used in the main App component, enabling automatic instrumentation of route changes.