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 ( < BrowserRouter

< Routes

< Route path = " / " element = { < Home /> } /> < Route path = " about " element = { < About /> } /> < Route path = " dashboard " element = { < Dashboard /> }

< Route index element = { < DashboardHome /> } /> < Route path = " settings " element = { < Settings /> } /> </ Route

< Route path = " users/:userId " element = { < User /> } /> </ Routes

</ BrowserRouter

) ; } NavLink Active States Use NavLink for navigation with active styling: import { NavLink } from "react-router" ; function Nav ( ) { return ( < nav

< NavLink to = " / " end className = { ( { isActive } ) => ( isActive ? "active" : "" ) }

Home </ NavLink

< NavLink to = " /dashboard " className = { ( { isActive } ) => ( isActive ? "active" : "" ) }

Dashboard </ NavLink

</ nav

) ; } Reading URL Params Use useParams to read dynamic route segments: import { useParams } from "react-router" ; function User ( ) { const { userId } = useParams ( ) ; return < h1

User { userId } </ h1

; } 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 ( < div

< input value = { query || "" } onChange = { ( e ) => setSearchParams ( { q : e . target . value } ) } /> < p

Results for: { query } </ p

</ div

) ; } Further Documentation If anything related to React Router is not covered in these references, you can search the official documentation: https://reactrouter.com/docs