You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
import {useActiveDocContext} from '@docusaurus/plugin-content-docs/client';
10
+
import {useLocation} from '@docusaurus/router';
11
+
import BrowserOnly from '@docusaurus/BrowserOnly';
12
+
```
13
+
14
+
Docusaurus uses a **single-page application (SPA)** routing system — meaning every route corresponds to **one component**.
15
+
16
+
In this guide, we’ll explore how Docusaurus manages routing for **Docs**, **Blog**, and **Pages**, and then dive deeper into how the routing system itself works behind the scenes.
17
+
18
+
---
19
+
20
+
## Routing in Content Plugins {#routing-in-content-plugins}
21
+
22
+
Each content plugin defines a `routeBasePath`, which tells Docusaurus **where to mount routes**.
23
+
24
+
-**Docs plugin:**`/docs` by default
25
+
-**Blog plugin:**`/blog`
26
+
-**Pages plugin:**`/`
27
+
28
+
Here’s how these routes connect in the URL hierarchy:
29
+
30
+
```mermaid
31
+
graph LR;
32
+
A(["https://codeharborhub.github.io/"])
33
+
B(["/base-url/"])
34
+
C(["/docs/"])
35
+
D(["/blog/"])
36
+
E(["/"])
37
+
F["Docs Routes"]
38
+
G["Blog Routes"]
39
+
H["Page Routes"]
40
+
A---B;
41
+
B---C;
42
+
B---D;
43
+
B---E;
44
+
C---F;
45
+
D---G;
46
+
E---H;
47
+
```
48
+
49
+
When a user visits `/docs/configuration`, Docusaurus finds the `/docs` branch, and then loads the corresponding document route.
50
+
51
+
You can fully customize your route structure. For instance, setting `routeBasePath: '/'` in **Docs-only mode** removes the `/docs` prefix while keeping all other plugins intact.
52
+
53
+
---
54
+
55
+
## Pages Routing {#pages-routing}
56
+
57
+
**Pages** are the simplest form of routes — file paths directly map to URLs.
58
+
For example:
59
+
60
+
```
61
+
src/pages/about.mdx → /about
62
+
src/pages/index.js → /
63
+
```
64
+
65
+
- Markdown pages render using `@theme/MDXPage`.
66
+
- React components render directly as route components.
67
+
68
+
See [Creating Pages](../guides/creating-pages.mdx#routing) for more details.
69
+
70
+
---
71
+
72
+
## Blog Routing {#blog-routing}
73
+
74
+
The blog plugin auto-generates several types of routes:
75
+
76
+
| Route Type | Example URL | Customizable Option | Component |
This page, <URLPath />, is generated from <FilePath />. The doc content is displayed inside `@theme/DocPage`, which manages layout, sidebar, and navigation.
111
+
112
+
---
113
+
114
+
## File Paths vs URL Paths {#file-paths-and-url-paths}
115
+
116
+
In Docusaurus, **file paths map to URL paths**, unless overridden using the `slug` front matter.
- Other extensions → Treated as [assets](../guides/markdown-features/markdown-features-assets.mdx)
132
+
133
+
---
134
+
135
+
## Routes Become HTML Files {#routes-become-html-files}
136
+
137
+
Every route in Docusaurus compiles into a **static HTML file** during build. For instance, the route `/docs/advanced/routing` maps to:
138
+
139
+
```
140
+
/build/docs/advanced/routing/index.html
141
+
```
142
+
143
+
If `trailingSlash` is disabled, the same route becomes `routing.html`.
144
+
145
+
This allows hosting on any static server (like GitHub Pages or Vercel) — Docusaurus handles **server-side rendering → static HTML conversion** automatically.
146
+
147
+
### Example
148
+
149
+
```bash
150
+
build/
151
+
├── docs/
152
+
│ └── advanced/
153
+
│ └── routing/
154
+
│ └── index.html # /docs/advanced/routing
155
+
└── index.html # /
156
+
```
157
+
158
+
When using a custom `baseUrl`, ensure assets resolve correctly (e.g., `/base/assets/js/...`).
159
+
160
+
---
161
+
162
+
## Generating and Accessing Routes {#generating-and-accessing-routes}
163
+
164
+
Use the `addRoute` lifecycle method to programmatically add routes:
165
+
166
+
```js title="plugin-example.js"
167
+
actions.addRoute({
168
+
path:"/custom",
169
+
component:"@site/src/pages/CustomPage.js",
170
+
});
171
+
```
172
+
173
+
All routes are aggregated in `.docusaurus/routes.js`.
174
+
You can inspect them in the [Debug Routes Panel](/__docusaurus/debug/routes).
175
+
176
+
### Accessing Routes in React
177
+
178
+
You can access route data using `@docusaurus/router`, a wrapper around React Router.
179
+
180
+
```jsx title="RouteInfo.js"
181
+
importReactfrom"react";
182
+
import { useLocation } from"@docusaurus/router";
183
+
184
+
exportfunctionPageRoute() {
185
+
constlocation=useLocation();
186
+
return (
187
+
<span>
188
+
You are currently on <code>{location.pathname}</code>
189
+
</span>
190
+
);
191
+
}
192
+
```
193
+
194
+
<BrowserWindow>
195
+
<BrowserOnly>
196
+
{
197
+
()=> <span> You are currently on <code>{location.pathname}</code></span>
Because Docusaurus is an SPA, it handles navigation through React Router. However, if you link to static HTML files that aren’t part of Docusaurus routes, use the special `pathname://` protocol to perform a **non-SPA redirect**.
- Docusaurus follows a **SPA routing system** built on React Router.
233
+
- Every content plugin defines its **route base path**.
234
+
-**Docs** support **nested and versioned** routes.
235
+
- URLs map directly from files but can be customized using `slug`.
236
+
- During build, routes become **static HTML files** for deployment.
237
+
- Use `pathname://` for non-SPA links or static assets.
238
+
239
+
With this routing power, our **CodeHarborHub** site can scale efficiently — from a simple landing page to a complex multi-version documentation ecosystem.
0 commit comments