124 lines
3.2 KiB
Markdown
124 lines
3.2 KiB
Markdown
# Declarative Mode
|
|
|
|
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.
|
|
|
|
Use this reference after the main skill identifies a Declarative Mode app.
|
|
|
|
## Read the Local Docs by Mode
|
|
|
|
Start with:
|
|
|
|
```txt
|
|
react-router/docs/start/modes.md
|
|
react-router/docs/start/declarative/index.md
|
|
```
|
|
|
|
Then use the Declarative docs under:
|
|
|
|
```txt
|
|
react-router/docs/start/declarative/
|
|
```
|
|
|
|
Those files cover installation, routing, navigation, and URL values. For conceptual details, read relevant files in:
|
|
|
|
```txt
|
|
react-router/docs/explanation/
|
|
```
|
|
|
|
Always check the `[MODES: declarative, ...]` marker in a doc before applying it.
|
|
|
|
## Declarative Router Shape
|
|
|
|
Typical setup:
|
|
|
|
```tsx
|
|
import { BrowserRouter, Routes, Route } from "react-router";
|
|
|
|
function App() {
|
|
return (
|
|
<BrowserRouter>
|
|
<Routes>
|
|
<Route path="/" element={<Home />} />
|
|
<Route path="about" element={<About />} />
|
|
<Route path="dashboard" element={<DashboardLayout />}>
|
|
<Route index element={<DashboardHome />} />
|
|
<Route path="settings" element={<Settings />} />
|
|
</Route>
|
|
</Routes>
|
|
</BrowserRouter>
|
|
);
|
|
}
|
|
```
|
|
|
|
Look for APIs such as:
|
|
|
|
- `<BrowserRouter>`
|
|
- `<HashRouter>`
|
|
- `<MemoryRouter>`
|
|
- `<Routes>`
|
|
- `<Route>`
|
|
- `element={<Component />}`
|
|
- `useRoutes`
|
|
|
|
## Routing
|
|
|
|
Before editing routes, read:
|
|
|
|
```txt
|
|
react-router/docs/start/declarative/routing.md
|
|
```
|
|
|
|
Rules:
|
|
|
|
- Use `<Routes>` and `<Route>` for route configuration.
|
|
- Use nested routes with `<Outlet>` for shared layout.
|
|
- Use index routes for default child UI.
|
|
- Use route params and splats according to the declarative routing docs.
|
|
- Do not add route object loaders/actions to a Declarative router.
|
|
|
|
## Navigation
|
|
|
|
Before changing navigation, read:
|
|
|
|
```txt
|
|
react-router/docs/start/declarative/navigating.md
|
|
```
|
|
|
|
Rules:
|
|
|
|
- Use `<Link>` or `<NavLink>` for user-initiated internal navigation.
|
|
- Use `NavLink` when active styling matters.
|
|
- Use `useNavigate` for imperative navigation from event handlers or effects.
|
|
- Do not use plain `<a href>` for internal navigation unless intentionally forcing a full document navigation.
|
|
|
|
## URL Values
|
|
|
|
Before changing params, search params, or location state, read:
|
|
|
|
```txt
|
|
react-router/docs/start/declarative/url-values.md
|
|
react-router/docs/explanation/location.md
|
|
```
|
|
|
|
Rules:
|
|
|
|
- Use `useParams` for dynamic route params.
|
|
- Use `useSearchParams` for query string state.
|
|
- Use `useLocation` for the current location object and navigation state.
|
|
- Validate and parse URL params; they are strings and can be absent.
|
|
- Preserve unrelated search params unless intentionally resetting them.
|
|
|
|
## Mode Boundary
|
|
|
|
Declarative Mode does not have Data/Framework APIs such as:
|
|
|
|
- `loader`
|
|
- `action`
|
|
- `<Form>`
|
|
- `useFetcher`
|
|
- `useNavigation`
|
|
- route module exports
|
|
- generated `./+types` route types
|
|
|
|
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.
|