Introducing Nested Routing in Redux Little Router

September 13, 2016

Ever since we announced Redux Little Router, we’ve worked hard to simplify the API, reduce boilerplate, and ease adoption for beginners. To advance these goals, we’ve introduced two new features: nested routes and nested fragments.

Check out Redux Little Router on GitHub!

Nested Routes

The first step in installing Redux Little Router into your project is to define a “route configuration.” This associates arbitrary metadata with your routes, allowing you to retrieve useful route-specific values when the current URL matches a route (think page titles, data requirements, or conditional visibility of child components).

Prior to v9.0.0, the route configuration looked like this:

```js const routes = { '/': { title: 'Home' }, '/messages': { title: 'Message' }, '/messages/:user': { title: 'Message History' } }; ```

There’s problems with this approach. There’s significant repetition of child routes, which irritates more as your routes grow. Worse, flat routes discard all knowledge of hierarchy. Knowing details about parent routes is the only way to enable features that depend on their position in the route hierarchy (consider an “up” button that allows users to travel up the route tree).

Nested routes solve both problems in a backwards-compatible way. Route definitions now look like this:

```js const routes = { '/': { title: 'Home' '/messages': { title: 'Message', '/:user': { title: 'Message History' } } }, '/flat-routes-still-work': { title: 'Flat routes still work!' } }; ```

The result key of your router reducer now recursively attaches parent route results!

```js // For a URL matching /messages/:user { pathname: '/messages/a-user-has-no-name', params: { user: 'a-user-has-no-name' }, query: { some: 'thing' }, result: { title: 'Message History' parent: { title: 'Message' parent: { title: 'Home' } } } } ```

Notice that nested and flat routes can intermingle, with the caveat that flat routes won’t receive any parent route results.route

Nested Fragments

Treating routes as flat led to even worse problems for <Fragment>s. Consider the following:

```js

Home

Messages

Message History

```

That’s a lot of work and repetition for a simple nested UI!

v9.0.0 introduces <RelativeFragment>, backporting the old <Fragment> behavior as <AbsoluteFragment>. If you’re importing Fragment in your current project, your behavior won’t change! We’ll make <RelativeFragment> the default in the next major version.

<RelativeFragment> lets you nest fragments to match your UI hierarchy to your route hierarchy, much like the <Route> component does in react-router. Child fragments derive their parent route from their parent fragment. Given a URL of /home/bio/dat-boi, and the following elements:

```js

Home

Bios

Dat Boi

Something something whaddup

```

…React will render:

```js

Home

Bios

Dat Boi

Something something whaddup

```

If you’re using one Fragment type exclusively, you can take advantage of ES6 module syntax to reduce verbosity:

```js import { RelativeFragment as Fragment } from 'redux-little-router'; // or import { AbsoluteFragment as Fragment } from 'redux-little-router'; ```

We believe that embracing the hierarchy of routes empowers the URL to make smarter decisions about application state. Try out the new version of Redux Little Router today! We’d love feedback on the new APIs.

There’s more to come! We plan on making the store enhancer initialization less ambiguous between client and server renders by integrating into the node server ecosystem. Stay tuned!

Related Posts

Rust vs Go: Which Is Right For My Team?

August 29, 2024
In recent years, the shift away from dynamic, high-level programming languages back towards statically typed languages with low-level operating system access has been gaining momentum as engineers seek to more effectively solve problems with scaling and reliability. Demands on our infrastructure and devices are increasing every day and downtime seems to lurk around every corner.

A Rare Interview With A Designer who Designs Command-line Interfaces

May 13, 2024
For years, terminal and command-line applications have followed a familiar pattern: developers identify a need, code a solution, and release it for free, often as open-source software.

The Evolution of urql

December 6, 2022
As Formidable and urql evolve, urql has grown to be a project that is driven more by the urql community, including Phil and Jovi, than by Formidable itself. Because of this, and our commitment to the ethos of OSS, we are using this opportunity to kick off what we’re calling Formidable OSS Partnerships.