DEV Community

Delpi Kye
Delpi Kye

Posted on

Rethinking React routing: a simpler, more predictable approach

#webdev #frontend #react #showdev

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)
  })
})
Enter fullscreen mode Exit fullscreen mode

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")
Enter fullscreen mode Exit fullscreen mode

You write:

navigate("/users/:id", {
  params: { id: 1 }
})
Enter fullscreen mode Exit fullscreen mode

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()
Enter fullscreen mode Exit fullscreen mode

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

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

Top comments (0)