React Router Declarative Mode

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 `:

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

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

NavLink Active States

Use NavLink for navigation with active styling:

import { NavLink } from "react-router";

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

Reading URL Params

Use useParams to read dynamic route segments:

import { useParams } from "react-router";

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

Working with Search Params

Use useSearchParams for query string values:

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
• Source: remix-run/agent-skills
• License: MIT

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