Build your own router

Published: 2020-03-04 by Lars  guidecode

This blog post will describe a simple router for single page web applications, written on top of Redux and React.

What is routing?

Broadly speaking, routing is a central mechanism in most web applications, which allows the user to see different views (pages) and navigate between these views. Routing integrates with features in the browser: an address bar with a URL and an associated history of previous visited URLs. Because of this close integration with the browser, routing must play well with browser-based features such as sharing a URL and clicking the "back" (and "forward") buttons to navigate to previous views.

Routing must basically provide two mechanisms to your application:

1. Conditional rendering (based on current URL)
2. User actions to navigate (change current URL)

In the React eco-system, there is a single very popular router, React Router, plus a large number of niche routers. If you don't want to use React Router (see downsides below), and don't want to use a niche library either, why not build your own router?

Below I describe how to write a router that:

• Is simple
• Is configured without JSX
• Make Redux state the single source of truth for location state

With this router you will be able to write applications that does conditional rendering like this:

const routes = {
  '/': <Home />,
  '/signin': <LoginForm />,
  '/profile': <Profile />
};
const App = () => {
  const routeResult = useRoutes(routes);
  return (
    <div className="App">
      {routeResult}
    </div>
  );
};

And navigation like this:

const HomeButton = () => {
  const navigate = useNavigate();
  return (
    <button onClick={navigate('/')}>Home</button>
  );
};

Redux: uni-directional data flow

One of the benefits of building your own router is that you can fit it well with your preferred architecture. I prefer to use Redux for managing application state, and I see the current location (URL) as a perfect example of application state, so I really prefer to keep location in my Redux store.

The implementation of our router will:

1. Synchronize changes in current location to Redux state.location.
2. Render conditionally by subscribing your components to state.location with useSelector.
3. Navigate by changing the current URL (which will then synchronize to state.location).

This implementation fits directly into the unidirectional data flow model of Redux, as you can see in this diagram by Michael Sargent:

Next I will walk through such an implementation. We will use the history module to access the browser's History API. We will also use the query-string module to convert between URL-style strings and more convenient objects. You can find a fully working code example on GitHub.

const store = ...
history.listen(location => store.dispatch(locationChanged(location));
store.dispatch(locationChanged(history.location));

const locationChanged = payload => ({ type: 'locationChanged', payload });

const locationReducer = (state, action) => {
  switch (action.type) {
    case 'locationChanged':
      return {
        hash: queryString.parse(action.payload.hash) || {},
        pathname: action.payload.pathname,
        search: queryString.parse(action.payload.search) || {}
      };
    default:
      return state;
  }
};

const rootReducer = combineReducers(
  location: locationReducer,
  ...
);
const store = createStore(rootReducer);

const routes = {
  '/': <Home />,
  '/signin': <LoginForm />,
  '/profile': <Profile />
};
const App = () => {
  const pathname = useSelector(state => state.location.pathname);
  return (
    <div className="App">
      {routes[pathname]}
    </div>
  );
};

  '/profile': React.lazy(() => import('./Profile'))

const HomeButton = () => {
  const navigateHome = () => history.push({ pathname: '/' });
  return (
    <button onClick={navigateHome}>Home</button>
  );
};

const historyPush = payload => ({ type: 'historyPush', payload });

We will not create a normal reducer for this action, because that would require a more complicated two-way synchronization between current URL and state. We are already synchronizing the current URL into state, as described above. Because of that, the easiest way to implement a historyPush Redux action is to write a Redux middleware to convert the action into a call to the history API, like the one above, which will modify the current URL. Such a piece of middleware looks like this:

const locationMiddleware = store => next => action => {
  switch (action.type) {
    case 'historyPush':
      const { hash, pathname, search } = action.payload;
      const location = {
        hash: queryString.stringify(hash || {}),
        pathname: pathname,
        search: queryString.stringify(search || {})
      };
      history.push(location);
    default:
      next(action);
  }
};

This middleware needs to be included when creating the Redux store, like this:

const middleware = compose(applyMiddleware(locationMiddleware));
const store = createStore(rootReducer, middleware);

With this in place, navigation is now done with the usual useDispatch:

const HomeButton = () => {
  const dispatch = useDispatch();
  const navigateHome = () => dispatch(historyPush({ pathname: '/' }));
  return (
    <button onClick={navigateHome}>Home</button>
  );
};

Encapsulating this into a React hook is as easy as:

const useNavigate = () => {
  const dispatch = useDispatch();
  return pathname => ev => {
    ev.preventDefault();
    dispatch(historyPush({ pathname }));
  };
}

And then navigation becomes this straightforward:

const HomeButton = () => {
  const navigate = useNavigate();
  return (
    <button onClick={navigate('/')}>Home</button>
  );
};

Conclusion

Less than 30 lines of Redux reducer and middleware plus a sprinkle of React hooks was all we needed to implement a simple but useful router.

Here is a diagram of the full flow from initial render, through the navigation to a new page based on the sample code.

If you need additional features, such as path matching, nested routing or redirects, these can easily be added.

<Router>
  <ul>
    <li><Link to="/">Home</Link></li>
    <li><Link to="/about">About</Link></li>
  </ul>
  <Switch>
    <Route exact path="/">
      <Home />
    </Route>
    <Route path="/about">
      <About />
    </Route>
  </Switch>
</Router>

I learned about Redux-first routing from this excellent blog post.

Discuss on Twitter