
State-Driven Routing with React, Redux, Selectors - thinkloop
http://www.thinkloop.com/article/state-driven-routing-react-redux-selectors/
======
carsongross
_Routing is complex. There are a lot of disparate pieces that come together to
give users the ability to navigate a site. There is the address bar ui element
which displays a url string on screen. There is back /forward functionality
accessible through buttons, keyboard shortcuts or other input methods. There
are <a> links which navigate to new content in various ways. There is url
input through the address bar._

I appreciate a look into this world, but routing on the web isn't supposed to
be very complex. One of the big simplicity wins of the web network
architecture was that it was stateless almost everywhere, with hypertext as
the engine of application state[1].

Anybody can write some HTML with some anchor tags and tie it to some routes
declared in a server-side routing file. The back button will work. History
will work. Refresh will work. Copy-and-pasting the URL into an email will
work. It's so easy that even I can do it.

[1]
[https://en.wikipedia.org/wiki/HATEOAS](https://en.wikipedia.org/wiki/HATEOAS)

~~~
wesleytodd
> Anybody can write some HTML with some anchor tags and tie it to some routes
> declared in a server-side routing file. The back button will work. History
> will work. Refresh will work. Copy-and-pasting the URL into an email will
> work. It's so easy that even I can do it.

The solution I use[1], and disclaimer also wrote, was targeted directly at
server rendered SPA's to follow closely with these ideals. Layers over native
anchor tags, just barebones handles the link clicking and uses Express routing
which is obviously back end compatible.

[1]
[https://github.com/wesleytodd/nighthawk](https://github.com/wesleytodd/nighthawk)

~~~
wesleytodd
Also, forgot to mention, nighthawk also solves the edge cases mentioned toward
the end:

* ctrl-clicking to open a new tab

* shift-clicking to open a new window

* alt-clicking

* non-left-clicking

* target attribute in <a>

* mailto: in href

~~~
nojvek
This is awesome. 8kb is still pretty ridiculous for a routing library.

I do like that there is no special integration. A href links just work.

~~~
wesleytodd
Agreed, but it is still smaller than the competitors. I would love to reduce
it even more, but there is very little concern for file size in express'
router since it is server side.

Also, I believe it can be made smaller with one of the other bundlers.
Browserify is not the most size conscious choice, it just happens to be the
one I have the most experience with.

------
jshmrsn
If I copy and re-enter a URL generated by pressing buttons in the demo app, I
get a page that just says "BAZ".

E.g., the URL to the demo's about page:
[http://www.thinkloop.com/article/state-driven-routing-
react-...](http://www.thinkloop.com/article/state-driven-routing-react-redux-
selectors/demo/about)

------
msoad
I'm doing something similar to this with MobX. React Router was too large for
my simple routing need.

