A lightweight extension to React Router that provides named routes for simpler, more maintainable navigation.
- Named navigation with path parameters and query support
-
Hooks for easy programmatic navigation (
useNamedNavigate
) and route-awareness (useNamedLocation
) - Nested routes just like React Router, but with named references
-
Declarative route definition – Use
<NamedRoutes>
and<NamedRoute>
for JSX-based routing setup. - Nested routes support – Define structured, hierarchical routes with named references.
Install named-react-router along with react-router-dom (which it depends on):
npm install named-react-router react-router-dom
Or, with Yarn:
yarn add named-react-router react-router-dom
Use createNamedBrowserRouter
to define your routes as an array of NamedRouteObject
:
import { createNamedBrowserRouter } from "named-react-router";
import HomePage from "./HomePage";
import AboutPage from "./AboutPage";
import TeamPage from "./TeamPage";
enum RouteNames {
home = "home",
about = "about",
team = "team",
}
export const router = createNamedBrowserRouter([
{
path: "",
name: RouteNames.home,
element: <HomePage />,
children: [
{
path: "about",
name: RouteNames.about,
element: <AboutPage />,
children: [
{ path: "team", name: RouteNames.team, element: <TeamPage /> },
],
},
],
},
]);
Then wrap your app with the returned router (similar to a standard React Router setup).
Alternatively, use the <NamedRoutes>
and <NamedRoute>
components for a JSX-based route definition.
import { NamedRoutes, NamedRoute } from "named-react-router";
import HomePage from "./HomePage";
import AboutPage from "./AboutPage";
import TeamPage from "./TeamPage";
import { BrowserRouter } from "react-router-dom";
export function App() {
return (
<BrowserRouter>
<NamedRoutes>
<NamedRoute name="home" path="/" element={<HomePage />}>
<NamedRoute name="about" path="about" element={<AboutPage />}>
<NamedRoute name="team" path="team/:id" element={<TeamPage />} />
</NamedRoute>
</NamedRoute>
</NamedRoutes>
</BrowserRouter>
);
}
Use the useNamedNavigate
hook to navigate by route name instead of manually typed paths:
import { useNamedNavigate } from "named-react-router";
export function GoToTeamButton() {
const navigate = useNamedNavigate();
function handleClick() {
navigate({ name: "team" }); // Navigates to "about/team" based on the example above
}
return <button onClick={handleClick}>Go To Team</button>;
}
⚠ Note:
useNamedLocation()
does not currently work with<NamedRoutes>
. UsecreateNamedBrowserRouter
Use the useNamedLocation
hook to get the current location plus an optional name
property:
import { useNamedLocation } from "named-react-router";
export function Breadcrumb() {
const location = useNamedLocation();
const routeName = location.name || "Unnamed Route";
return (
<div>
<p>Current Path: {location.pathname}</p>
<p>Current Named Route: {routeName}</p>
</div>
);
}
Creates a React Router browser router with named-route capabilities.
-
routes
– An array ofNamedRouteObject
(extends React Router’sRouteObject
withname
and optional nestedchildren
). -
options
– Optional configuration, same as the options increateBrowserRouter
.
Returns a function to navigate by name or by standard path.
const navigate = useNamedNavigate();
navigate("some/path");
// or
navigate({
name: RouteNames.team,
params: { id: "123" },
query: { tab: "info" },
});
Only works with createNamedBrowserRouter
. Returns the standard location
object plus a name
property for the active named route.
const location = useNamedLocation();
console.log(location.pathname); // "/about/team/123"
console.log(location.name); // "team"
A wrapper component that replaces and enables named-route navigation. It automatically collects named route definitions for use with useNamedNavigate()
.
import { NamedRoutes, NamedRoute } from "named-react-router";
<NamedRoutes>
<NamedRoute name={RouteNames.home} path="/" element={<HomePage />} />
<NamedRoute name={RouteNames.about} path="about" element={<AboutPage />} />
</NamedRoutes>;
A component that defines a named route inside .
Props:
-
name
(string) – The unique name of the route. Required for named navigation. -
path
(string) – The path of the route. -
element
(ReactNode) – The component to render at this route.
<NamedRoute
name={RouteNames.profile}
path="profile/:id"
element={<ProfilePage />}
/>