Rethinking React routing: a simpler, more predictable approach

Delpi Kye — Fri, 27 Mar 2026 04:26:55 +0000

I built a modern React router because I was tired of existing ones

Routing in React has always felt… either too simple or too complicated.

Some routers feel too minimal — you end up building everything yourself
Others feel over-engineered — great power, but heavy mental overhead

So I built my own.

👉 Introducing routexiz — a lightweight, modern router for React with a clean mental model.

🧠 The idea: routing as a tree

Instead of thinking in flat routes, routexiz models your app like a tree.

Each route is a node.
Navigation resolves a single path from root to leaf.

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

This gives you:

Natural nested layouts
Predictable execution
Clear structure as your app grows

⚡ Navigation that understands your route

Instead of this:

navigate("/users/1")

You write:

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

No string guessing.
No mismatched paths.

🔥 What makes it different?

I focused on combining things I always wanted in one place:

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

All without making the API complex.

🧩 Example: data loading

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

const data = useLoaderData()

Simple, predictable, and works with React Suspense.

🆚 How is this different?

Very roughly:

Traditional routers → string-based navigation
Some modern routers → very powerful, but complex mental model
routexiz → tries to balance power + simplicity

The goal is not to compete on features alone, but on developer experience and clarity.

🧠 Mental model

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

This separation keeps things clean as your app grows.

🧪 Where I think it shines

From my own usage, this approach feels especially nice when:

Building dashboards with nested layouts
Handling auth / permissions cleanly
Prefetching data for smoother navigation
Keeping routing logic predictable as the app scales

🚧 Current state

I’ve built most of the core features:

Type-safe params
Nested routing builder
Devtools (basic)
React adapter
Documentation & examples

But…

👉 The ecosystem is still very early.

🙌 Looking for feedback (and contributors)

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 😄

🔗 Links

NPM: https://www.npmjs.com/package/routexiz
Live example: https://codesandbox.io/p/sandbox/2lslks

🧠 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.

💬 If you're currently using React Router or another solution,

what's the biggest pain point you have with routing today?

DEV Community: Delpi Kye