# React Router Declarative Mode

> Build React applications using React Router's declarative mode with BrowserRouter. Use when configuring routes with JSX, navigating with Link/NavLink, or reading URL params and search params without data loaders or actions.

- **Type:** Skill
- **Install:** `agentstack add skill-remix-run-agent-skills-react-router-declarative-mode`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [remix-run](https://agentstack.voostack.com/s/remix-run)
- **Installs:** 0
- **Category:** [Search](https://agentstack.voostack.com/c/search)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [remix-run](https://github.com/remix-run)
- **Source:** https://github.com/remix-run/agent-skills/tree/main/skills/react-router-declarative-mode

## Install

```sh
agentstack add skill-remix-run-agent-skills-react-router-declarative-mode
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# React Router Declarative Mode

Declarative mode is React Router's simplest mode using ``, ``, and `` for basic client-side routing without data loading features like loaders or actions.

## When to Apply

- Using `` for routing
- Configuring routes with `` and ``
- Navigating with ``, ``, or `useNavigate`
- Reading URL params with `useParams`
- Working with search params using `useSearchParams`
- Accessing location with `useLocation`

## References

Load the relevant reference for detailed guidance on the specific API/concept:

| Reference                  | Use When                                          |
| -------------------------- | ------------------------------------------------- |
| `references/routing.md`    | Configuring routes, nested routes, dynamic params |
| `references/navigation.md` | Links, NavLink active states, programmatic nav    |
| `references/url-values.md` | Reading params, search params, location           |

## Critical Patterns

These are the most important patterns to follow. Load the relevant reference for full details.

### Basic Route Setup

Configure routes with JSX using `` and ``:

```tsx
import { BrowserRouter, Routes, Route } from "react-router";

function App() {
  return (
    
      
        } />
        } />
        }>
          } />
          } />
        
        } />
      
    
  );
}
```

### NavLink Active States

Use `NavLink` for navigation with active styling:

```tsx
import { NavLink } from "react-router";

function Nav() {
  return (
    
       (isActive ? "active" : "")}
      >
        Home
      
       (isActive ? "active" : "")}
      >
        Dashboard
      
    
  );
}
```

### Reading URL Params

Use `useParams` to read dynamic route segments:

```tsx
import { useParams } from "react-router";

function User() {
  const { userId } = useParams();
  return User {userId};
}
```

### Working with Search Params

Use `useSearchParams` for query string values:

```tsx
import { useSearchParams } from "react-router";

function SearchResults() {
  const [searchParams, setSearchParams] = useSearchParams();
  const query = searchParams.get("q");

  return (
    
       setSearchParams({ q: e.target.value })}
      />
      Results for: {query}
    
  );
}
```

## Further Documentation

If anything related to React Router is not covered in these references, you can search the official documentation:

https://reactrouter.com/docs

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [remix-run](https://github.com/remix-run)
- **Source:** [remix-run/agent-skills](https://github.com/remix-run/agent-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-remix-run-agent-skills-react-router-declarative-mode
- Seller: https://agentstack.voostack.com/s/remix-run
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.