MobX-powered router for React apps.
- State is decoupled from the UI. UI is simply a function of the state.
- UI is no longer responsible for fetching data. Data is now fetched during state transitions using router hooks.
- The router can override routing requests based on the application state. For example, it can redirect to the Sign In page if the user is not logged in.
- Supports
- 404 (Not Found) errors
- Server-Side Rendering
Learn how to use mobx-state-router in your own project.
When making a pull request, make sure that your commit messages conform to the Angular Commit Message Conventions. Doing so allows us to automate the whole package release workflow using semantic-release.
To simplify this process, we have included Commitizen as a dependency of this project. Always execute the following two commands to commit to your repo. This will prompt you to fill out any required commit fields interactively.
$ git add --all
$ yarn cz-commit
mobx-state-router is based on ideas from several Open Source projects. I am grateful to the developers of these projects for their contributions. Special thanks go to the following contributions:
How to decouple state and UI (a.k.a. you don’t need componentWillMount)
This article by Michel Weststrate provided the
initial inspiration for writing mobx-state-router. It explains the downsides of mixing
State and UI and how to untangle the mess!
mobx-router
This library by Kitze is a good implementation of Michel
Weststrate's ideas. I have borrowed some concepts from this implementation and then
added my own. Thanks Kitze!
router5
This is a more extensive library for routing. It's unique feature is that routes
are organized as a tree, made of segments and nodes. It aims to be framework agnostic
and uses middleware and plugins to adapt to different frameworks. Of course, with
flexibility comes complexity. mobx-state-router makes some choices for you to keep
the overall learning curve simple.