# Implement React Web Navigation

Routing decisions in React apps can create broken links and fragile state. This skill provides practical React Router and Next.js patterns for paths, links, redirects, and URL state.

## Install

```bash
npx skillstore add cjharmath/web-navigation
```

## Metadata

- Status: approved
- Slug: cjharmath-web-navigation
- Skillstore revision: r1
- Version status: missing
- Tree hash: c133b62d25d2be05fbcb8027134dac8a900e1d27fe377097aa91811256cb465b
- Author: CJHarmath
- GitHub username: CJHarmath
- License: MIT
- Repository: https://github.com/CJHarmath/claude-agents-skills/tree/main/skills/web-navigation
- Ref: dd4a3ef9f20ddf38830950b4bb713df96b431fd6
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands
- Quality score: 77
- Quality tier: bronze
- Public page: https://skillstore.pages.dev/skills/cjharmath-web-navigation
- Manifest: https://skillstore.pages.dev/api/skills/cjharmath-web-navigation/manifest

## Capabilities

- Shows React Router v6 setup with BrowserRouter, Routes, nested routes, and layout outlets.
- Explains Next.js App Router file-based routes, route groups, layouts, and dynamic segments.
- Demonstrates programmatic navigation, link components, query parameters, and deep linking patterns.
- Covers loading states, error pages, scroll restoration, redirects, and tab navigation through URLs.
- Provides navigation guard examples for unsaved changes in React Router applications.

## Use Cases

- Plan React Routes: Design a route tree with public pages, protected pages, nested layouts, and fallback screens.
- Build Shareable Views: Store tabs, filters, sorting, and pagination in URLs so users can share exact application states.
- Migrate Routing Patterns: Compare React Router and Next.js routing approaches before moving a feature or application section.

## Prompt Templates

### Create Basic Routes

```
Use this skill to define basic React Router routes for my app pages. Include a home page, detail page, and not found page.
```

### Add URL State

```
Use this skill to design URL query parameters for filters, sorting, tabs, and pagination in a React product list.
```

### Design App Router Structure

```
Use this skill to plan a Next.js App Router folder structure with public pages, protected pages, shared layouts, and dynamic routes.
```

### Audit Navigation Flow

```
Use this skill to review my navigation flow for redirects, loading states, error states, scroll restoration, and unsaved change guards.
```

## Limitations

- It is documentation guidance, not an installable routing library.
- It focuses on React Router v6 and Next.js App Router patterns.
- It does not implement authentication, authorization, or server deployment configuration.
- Examples require adaptation for each project structure, data layer, and framework version.

## Best Practices

- Keep durable view state in the URL when users need sharing, refresh support, or back button behavior.
- Use framework link components for internal navigation so prefetching and history behavior stay consistent.
- Add explicit loading, error, not found, and scroll restoration behavior for user-facing routes.

## Anti Patterns

- Do not store critical navigation state only in memory when refresh or sharing must work.
- Do not use full page reloads for normal internal route changes in a single page app.
- Do not allow arbitrary redirect targets without validating the destination against allowed app routes.

## Security Audit

- Audited at: 2026-07-06T05:57:10.595\+00:00
- Summary: All static findings are false positives from Markdown code fences, inline code formatting, and TypeScript route examples in SKILL.md. No prompt injection, malware intent, system reconnaissance, command execution, or credential handling was found in the skill content.

## Stats

- Views: 274
- Downloads: 9
- Favorites: 0
- Popularity score: 0