Rethinking React routing: a simpler, more predictable approach

Source: Dev.to

Introducing routexiz

A lightweight, modern router for React with a clean mental model.
Instead of thinking in flat routes, routexiz models your app like a tree—each route is a node, and there is a single path from the root to any leaf.

// route definition
route("/", Layout, root => {
  root.route("/dashboard", Dashboard, dash => {
    dash.guard(authGuard);
    dash.middleware(trackPageView);
  });
});

Benefits

• Natural nested layouts
• Predictable execution order
• Clear structure as the app grows

Navigation

Instead of guessing strings:

navigate("/users/1");

you write:

navigate("/users/:id", {
  params: { id: 1 }
});

No string guessing, no manual interpolation.

Core Features

• Suspense‑first data loading
• Route‑level guards (block navigation)
• Middleware (side effects)
• Prefetch (on hover + viewport)
• Loader caching with TTL
• Error boundaries per route
• Built‑in transitions

All without a complex API.

Example: Loader & Data Access

route("/users/:id", User, {
  loader: async ({ params }) => fetchUser(params.id)
});

const data = useLoaderData(); // inside User component

Simple, predictable, and works seamlessly with React Suspense.

Design Philosophy

The goal isn’t to compete on raw features alone, but on developer experience and clarity.

• Guard → “Can we enter?”
• Middleware → “Do something while entering”

This separation keeps things clean as your app scales.

Ideal Use Cases

• Building dashboards with nested layouts
• Handling auth / permissions cleanly
• Prefetching data for smoother navigation
• Keeping routing logic predictable in large apps

Implemented Core Pieces

• Type‑safe params
• Nested routing builder
• Basic devtools
• React adapter
• Documentation & examples

Current Status

The ecosystem is still very early. If this approach resonates with you, I’d love your feedback:

• What feels intuitive?
• What feels off?
• What’s missing for production use?

Even better—try it in a small project and break it! 😄

NPM:
Live example:

Final Thought

I’m not trying to replace existing routers overnight; I just want to explore a simpler, more predictable way to handle routing in modern React. If that sounds interesting to you, let’s build it together.

What’s the biggest pain point you have with routing today?