Rematch framework with React-Router v4

Introduction

In the previous article, we covered the Rematch framework, designed to lower the barrier-to-entry for JavaScript developers starting with Redux and functional programming.
While coding Rematch reducers is an easy task, in order to have a complete function application, programmers still need to integrate routing into their projects. A router creates a history object, which it uses to keep track of the current location and re-render the website whenever that changes. The other components provided by React Router rely on having that history object available through React context, so they must be rendered as descendants of a router component. A React Router component that does not have a router as one of its ancestors will fail to work.

Rematch documentation provides basic information on getting simple routing configured, using BrowserRouter from React Router v4.
Unfortunately, integrating Redux -aware ConnectedRouter is not covered by the documentation and is not straightforward due to multiple breaking changes in both React Router and Rematch API making the existing documentation and references unreliable.

Why ConnectedRouter?

ConnectedRouter is integrated directly with Redux state. Since Rematch is meant to be a better way of integrating Redux, it only makes to use the redux-aware router. ConnectedRouter is an awesome package providing us with history operations such as push, replace and go back. It stores history inside redux as an immutable object, supports hot-reload support and much more. ConnectedRouter is available for both React.JS and React Native, making it an excellent tool to master.

Working Example

ConnectedRouter has to be integrated with the Redux store. Let’s start with that.

Let’s define routes as below:

Now, let’s integrate the above routes into our application.

Looking for more React.JS, React-Native, Node.JS tutorials, want us to cover a specific subject in our blog, or looking for assistance with your project? Please fill out the contact form.

More from our blog

See all posts