Flux-based component routing solution
Clone or download
Latest commit 50e64ac Oct 1, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci Upgrade all deps and build May 3, 2018
example Fix trailing slash behaviour Oct 2, 2018
scripts Add wildcard routes support Oct 2, 2018
src Fix trailing slash behaviour Oct 2, 2018
test Update tests to match new regexes Oct 2, 2018
.babelrc Refresh Oct 23, 2017
.editorconfig Refresh May 26, 2016
.eslintignore Better dist May 3, 2018
.eslintrc Upgrade all deps and build May 3, 2018
.gitignore Refresh Oct 23, 2017
LICENSE Fix e2e tests May 15, 2017
README.md Refresh Oct 23, 2017
minimal.gif Moar better readme May 15, 2017
moar.gif Moar better readme May 15, 2017
package.json v3.1.1 Oct 2, 2018
yarn.lock Deps May 7, 2018

README.md

component-router npm

Redux-based routing solution for components

Gitter CircleCI Dependencies Dev Dependencies

Idea

The idea of partial routing is coming from the need to track state of independent components in the URL.

Commonly used routers are mostly hierarchical. The great example of such a router is react-router. Unfortunately it is not possible to store component's state independently from the other component in a different "branch" of hierarchy.

They work perfectly for most of the UIs. But as soon as we are trying to build a complex UI with multiple independent components and each of those has own state you would like to preserve, it becomes a challenging task. ComponentRouter was created to provide a simple way of keeping such state in the URL with query params.

Here is an example of such interface.

  1. Chart block, which can be switched from bar to pie
  2. Filter block, that can be opened or closed
  3. Data panel with two tabs: sources and destinations
+------------------------------------------------------------------------------+
|  App "/app"                                                                  |
|                                                                              |
|  +------------------------------+  +---------------------------------------+ |
|  |  chart                       |  |  filter                               | |
|  |  [->bar] [pie]               |  |  [->opened] [closed]                  | |
|  |                              |  |                                       | |
|  |                              |  |                                       | |
|  |                              |  |                                       | |
|  |                              |  |                                       | |
|  |                              |  |                                       | |
|  +------------------------------+  +---------------------------------------+ |
|                                                                              |
|  +---------------------------------------------------+                       |
|  |  data                                             |                       |
|  |  [->sources] [destinations]                       |                       |
|  |                                                   |                       |
|  +---------------------------------------------------+                       |
|                                                                              |
+------------------------------------------------------------------------------+

As you can see each of these blocks has its own independent navigation and, for example, Filter can be closed or opened independently from currently displayed Chart type or Data tab selected.

  1. We can always keep the state of each block, but you will loose that state on page refresh.
  2. We can keep their states in some specialized Redux Store and cache in localStorage or even user settings in database on the server. But we are losing ability to share this page with someone else (unless we have some special "copy/paste state" functionality)
  3. At last we can keep state of each component in the URL as query parameter, which solves both problems. Current URL will be: /app?chart=bar&filter=opened&data=sources

Key feature is to update all links on the page if any of visible blocks changed its state. If lets all links to stay links, so it is possible to open link in a new tab, for instance. It is fixed by ComponentRouter.

Minimal example

Minimal example

Better example

NOTE href changes, so we can open link in new tab.

Better example

Installation

NPM

npm install --save redux history qs component-router

Don't forget to manually install peer dependencies (redux, history, qs) if you use npm@3.

1998 Script Tag:

<script src="https://unpkg.com/redux/dist/redux.min.js"></script>
<script src="https://unpkg.com/qs/dist/qs.js"></script>
<script src="https://unpkg.com/history/umd/history.min.js"></script>
<script src="https://unpkg.com/component-router/build/component-router.min.js"></script>
(Module exposed as `ComponentRouter`)

Demo

http://in-flux.github.io/component-router

Codepen demo

http://codepen.io/nkbt/pen/BNXamG?editors=101

Since ComponentRouter is working with browser location and navigation, it is not really possible to debug router in Codepen's Editor mode, but completely possible in Debug mode: [http://s.codepen.io/nkbt/debug/BNXamG] (http://s.codepen.io/nkbt/debug/BNXamG)

Usage

See example/App/index.js

Development and testing

Currently is being developed and tested with the latest stable Node 8 on OSX.

To run example covering all ComponentRouter features, use yarn start, which will compile example/index.js

git clone git@github.com:in-flux/component-router.git
cd component-router
yarn install
yarn start

# then
open http://localhost:8080

Tests

# to run ESLint check
yarn lint

# to run tests
yarn test

# to run end-to-end tests
# first, run `selenium/standalone-firefox:3.4.0` docker image
docker run -p 4444:4444 selenium/standalone-firefox:3.4.0
# then run test
yarn e2e

License

MIT