Anything App

React Router Reference

The platform automatically wraps your app in a hash router, enabling multi-page navigation without additional setup.

Imports and setup

Import routing primitives from react-router: Routes, Route, NavLink, Link, Outlet, useParams, and useNavigate. No top-level router provider is required in the app because the platform provides it.

Routes and layouts

Use Routes and Route to define pages. An index route renders at the parent URL, and path defines a URL segment such as about, settings, or notes/:noteId. Use a route without path as a shared layout route, and render child pages with Outlet.

A common shape is a Layout component with shared navigation and <Outlet />, wrapped around child routes for the home page, settings page, and detail pages. Keep route trees shallow unless the UI truly needs nested layouts.

Use NavLink for tabs and menus that need active styling. Its className callback receives isActive, so you can switch between active and inactive Tailwind classes. Use Link for basic navigation without active state. Use useNavigate() after actions such as saving a form, creating a record, opening a detail page, or going back with navigate(-1).

Dynamic routes

Use :paramName for dynamic segments, such as users/:userId or posts/:postId/comments/:commentId. Inside the route component, call useParams() and read the matching values. Treat params as strings and look up the matching record from persisted state or component state.

Best practices

Use layout routes for shared navigation, NavLink for active tabs and menus, useNavigate for programmatic redirects, index routes for default child content, and route params for stable record IDs rather than display labels. Keep routing simple and prefer a small number of clear pages over deeply nested route trees.