pulls/pr_01m47d15m3e54sn21z27rpy5n9

public

pr_01m47d15m3e54sn21z27rpy5n9/apps/web/.agents/skills/react-router/references/declarative-mode.md

123 lines3,284 bytesCode Blame

1	# Declarative Mode
2
3	Declarative Mode is React Router's simplest mode. It uses router components like `<BrowserRouter>` and JSX routes with `<Routes>`/`<Route>`. It does not provide loaders, actions, fetchers, or data-router pending UI.
4
5	Use this reference after the main skill identifies a Declarative Mode app.
6
7	## Read the Local Docs by Mode
8
9	Start with:
10
11	```txt
12	react-router/docs/start/modes.md
13	react-router/docs/start/declarative/index.md
14	```
15
16	Then use the Declarative docs under:
17
18	```txt
19	react-router/docs/start/declarative/
20	```
21
22	Those files cover installation, routing, navigation, and URL values. For conceptual details, read relevant files in:
23
24	```txt
25	react-router/docs/explanation/
26	```
27
28	Always check the `[MODES: declarative, ...]` marker in a doc before applying it.
29
30	## Declarative Router Shape
31
32	Typical setup:
33
34	```tsx
35	import { BrowserRouter, Routes, Route } from "react-router";
36
37	function App() {
38	return (
39	<BrowserRouter>
40	<Routes>
41	<Route path="/" element={<Home />} />
42	<Route path="about" element={<About />} />
43	<Route path="dashboard" element={<DashboardLayout />}>
44	<Route index element={<DashboardHome />} />
45	<Route path="settings" element={<Settings />} />
46	</Route>
47	</Routes>
48	</BrowserRouter>
49	);
50	}
51	```
52
53	Look for APIs such as:
54
55	- `<BrowserRouter>`
56	- `<HashRouter>`
57	- `<MemoryRouter>`
58	- `<Routes>`
59	- `<Route>`
60	- `element={<Component />}`
61	- `useRoutes`
62
63	## Routing
64
65	Before editing routes, read:
66
67	```txt
68	react-router/docs/start/declarative/routing.md
69	```
70
71	Rules:
72
73	- Use `<Routes>` and `<Route>` for route configuration.
74	- Use nested routes with `<Outlet>` for shared layout.
75	- Use index routes for default child UI.
76	- Use route params and splats according to the declarative routing docs.
77	- Do not add route object loaders/actions to a Declarative router.
78
79	## Navigation
80
81	Before changing navigation, read:
82
83	```txt
84	react-router/docs/start/declarative/navigating.md
85	```
86
87	Rules:
88
89	- Use `<Link>` or `<NavLink>` for user-initiated internal navigation.
90	- Use `NavLink` when active styling matters.
91	- Use `useNavigate` for imperative navigation from event handlers or effects.
92	- Do not use plain `<a href>` for internal navigation unless intentionally forcing a full document navigation.
93
94	## URL Values
95
96	Before changing params, search params, or location state, read:
97
98	```txt
99	react-router/docs/start/declarative/url-values.md
100	react-router/docs/explanation/location.md
101	```
102
103	Rules:
104
105	- Use `useParams` for dynamic route params.
106	- Use `useSearchParams` for query string state.
107	- Use `useLocation` for the current location object and navigation state.
108	- Validate and parse URL params; they are strings and can be absent.
109	- Preserve unrelated search params unless intentionally resetting them.
110
111	## Mode Boundary
112
113	Declarative Mode does not have Data/Framework APIs such as:
114
115	- `loader`
116	- `action`
117	- `<Form>`
118	- `useFetcher`
119	- `useNavigation`
120	- route module exports
121	- generated `./+types` route types
122
123	If the user asks for route data loading, DB/API-backed data, CRUD, form mutations, validation returned from submissions, revalidation, pending UI, optimistic UI, or fetchers, recommend Data Mode or Framework Mode depending on how much structure they want. Ask before migrating unless they already requested it.