Routing System
Relevant source files
The following files were used as context for generating this wiki page:
The routing system in the SuperClaude Website is built using react-router-dom to facilitate a single-page application (SPA) experience. It manages navigation between high-level pages like the Home and About sections, while also providing a specialized sub-system for dynamic documentation rendering based on categories and file names.
The system is designed to handle both standard internal links and complex markdown-based relative paths, ensuring that documentation remains navigable even when hosted as static assets. It also includes server-side configuration to support client-side routing on platforms like Netlify.
Sources: src/App.js:1-26, netlify.toml:8-11
Core Routing Architecture
The application uses a centralized Router component that wraps the entire application logic. Within this, the AppContent component evaluates the current location.pathname to determine layout adjustments (such as adding padding for the sidebar) and renders the appropriate view based on defined Route paths.
The diagram above illustrates how the AppContent component uses the current location to toggle layout states before delegating rendering to specific page components.
Sources: src/App.js:14-38
Defined Application Routes
The system defines several key routes to handle core site functionality:
| Path | Component | Description |
|---|---|---|
/ | HomePage | The landing page of the framework. |
/docs | DocPage | The main index for all documentation categories. |
/docs/:category/:file | DocViewerPage | Dynamic route for viewing specific markdown files. |
/contributors | ContributorsPage | Lists project contributors. |
/about | AboutUsPage | General information about the project. |
* | NotFoundPage | Fallback for any undefined routes. |
Sources: src/App.js:23-30
Documentation Routing Logic
The documentation system uses dynamic path segments (:category and :file) to load content. This allows the site to scale as new markdown files are added to the public/docs directory without requiring manual route updates for every new document.
Dynamic Resolution and Link Handling
Because documentation content is written in Markdown and may contain relative links (e.g., ../Reference/API.md), the routing system employs a linkResolver utility. This utility converts markdown file paths into valid application routes.
This sequence shows the transformation of a relative markdown file path into a SPA-compatible route.
Sources: src/pages/DocViewerPage.js:145-168, src/utils/linkResolver.js:25-45
Anchor and Hash Routing
The routing system supports smooth scrolling and hash navigation through the react-router-hash-link library. This is used in the DocViewerPage to allow users to navigate to specific headers within a document or between documents.
Sources: src/pages/DocViewerPage.js:148-164, package.json:20
Server-Side Configuration
To ensure that direct navigation to sub-pages (e.g., refreshing the browser on /docs/getting-started/install) does not result in a 404 error from the web server, the project includes a Netlify-specific redirect configuration. This rule redirects all traffic to index.html, allowing the React application to handle the routing logic.
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
Sources: netlify.toml:8-11
Layout and Navigation Components
The routing system interacts with UI components to provide visual feedback and navigation controls:
- Navbar: Contains
NavLinkelements that automatically apply anactiveclass when the current route matches the link's destination. - Sidebar: Only renders if the current path starts with
/docs. It uses thedocsMap.jsonto generate nested navigation for the documentation routes. - DocCard: Found on the
/docsindex page, these components provide visual entry points to the dynamic documentation routes.
Sources: src/components/Navbar.js:13-28, src/components/Sidebar.js:18-23, src/components/DocCard.js:7-12
Summary
The routing system is a robust implementation using react-router-dom that supports both static page navigation and dynamic content loading. By combining parameterized routes with a custom link resolver and server-side redirects, it ensures a seamless documentation-browsing experience across both standard and markdown-relative links.