
React Router v5 - jsdev93
https://reacttraining.com/blog/react-router-v5/
======
johnfn
Using react router on one of my personal projects (~ 30k loc) was probably one
of my largest regrets. At every turn it seemed designed to do the thing I
wouldn’t expect, or have arbitrary restrictions that made my life tougher.

Some examples:

* there's no relative routes [https://github.com/ReactTraining/react-router/issues/2172](https://github.com/ReactTraining/react-router/issues/2172)

* there's no way to refresh the page [https://github.com/ReactTraining/react-router/issues/1982](https://github.com/ReactTraining/react-router/issues/1982) ("that's your responsibility, not ours")

* The scroll position will stick when you navigate to a new route, causing you to need to create a custom component wrapper to manage scrolling [https://github.com/ReactTraining/react-router/issues/3950](https://github.com/ReactTraining/react-router/issues/3950)

* React router's <Link> do not allow you to link outside of the current site [https://github.com/ReactTraining/react-router/issues/1147](https://github.com/ReactTraining/react-router/issues/1147) so you have to make an <a> in those cases. This doesn’t sound bad, but it’s particularly frustrating when dealing with dynamic or user generated content. Why can’t they handle this simple case?

* Navigating to the same page would not actually reload the page, it would just trigger a componentDidMount() on all components in the page again, which led me to have a lot of bugs when I did some initialization in my constructor

~~~
davedx
Yup. I only use react-router when I have to (work). My other projects I always
roll my own. A typical html5 push router can be really small. I don’t reinvent
the wheel normally but routing is hugely overcomplicated in the react
ecosystem.

~~~
anonytrary
I feel like part of the problem with react libraries is that they implement
their code "the react way" which basically means forcing it into your tree
hierarchy. Dealing with dozens of higher order components gets really annoying
after a while.

~~~
k__
Doesn't much of this go away with hooks?

Before we had one hierarchy where everything was a component, logic and
visuals.

Now we have two hierarchies where visuals are components and logic are hooks.

------
mythz
I usually shudder when I see React Router major versions which usually result
in hard breaks that takes hours to migrate existing code bases to, so I'm
pleasantly surprised to see:

> v5 is fully backwards compatible with 4.x

It appears the major version bump was due to package configuration changes
instead of major API code changes.

~~~
realusername
Yeah that was my first reaction when I saw the title, "How hard is it going to
be this time?" since it took me 2 days to migrate to the v4 last time.

~~~
crispyporkbites
Why upgrade?

~~~
realusername
Because if you don't upgrade, you are stuck with whatever version of React
created at the time. You don't get stability & performance improvements, bug
fixes, you can't potentially install some newer libraries requiring the new
version. Not keeping up with upgrades is making the code rot slowly.

------
anurag
We migrated from React Router to Reach Router
([https://reach.tech/router](https://reach.tech/router)) and found it to be
better in a few ways:

* Built-in focus management.

* Smaller library size.

* Implicit route matching that Just Works.

* More comprehensive docs with live examples.

Migration was easy. Highly recommended.

~~~
ludwigvan
So both of these routers are written by Ryan Florence? Interesting, what was
the reason behind this? Freedom to experiment in one repo while keeping the
other stable?

~~~
zwily
Ryan originally wrote react-router but then it became part of the
ReactTraining org. Ryan later left ReactTraining to do his own thing, and
started reach.tech, and Reach Router was born. Now Ryan is back at
ReactTraining, and we’ll see what that means for the routers.

FWIW, I use Reach Router for everything now and greatly prefer it.

------
codesparkle
react-router depends on the ReactTraining/history package for browser
navigation support.

On 10 June 2017, an mind-bogglingly ill-conceived pull request[1] was merged,
which causes _invalid_ URLs to be pushed to the browser history, breaking the
back button and page refresh in many scenarios.

Ever since, users have practically been begging the maintainer to fix the
bug[2] and implementing hacky workarounds[3].

In a twist of irony, the contributor who originally introduced the bug has:

a) switched their own competing router package to a different history
implementation[4]

b) argued that fixing the bug (which was introduced in a patch release) would
require a major version bump, implying it would be better to let it remain
broken[5].

I concede that the software is open source, and nobody is entitled to make any
demands of the maintainers. Nevertheless, I pity the countless end-users who
are left wondering why the most basic functionality of their web browsers is
broken.

[1]:
[https://github.com/ReactTraining/history/pull/465](https://github.com/ReactTraining/history/pull/465)

[2]:
[https://github.com/ReactTraining/history/issues/505](https://github.com/ReactTraining/history/issues/505)

[3]:
[https://github.com/elastic/kibana/pull/32365](https://github.com/elastic/kibana/pull/32365)

[4]:
[https://github.com/pshrmn/curi/commit/e850bcd9297398653a79b9...](https://github.com/pshrmn/curi/commit/e850bcd9297398653a79b903f35818cb2df7738c)

[5]:
[https://github.com/ReactTraining/history/pull/656](https://github.com/ReactTraining/history/pull/656)

~~~
laurent123456
This [0] indeed seems like such a rookie mistake, with all kind of edge cases
ready to mess up the path encoding. The fact that they left such a broken
behaviour in the lib for two years doesn't inspire much confidence.

0:
[https://github.com/ReactTraining/history/pull/465/files#diff...](https://github.com/ReactTraining/history/pull/465/files#diff-c0634631ce0ed08197ba5cf4643ca0cfR37)

------
artellectual
I migrated away from react-router because from v3 to v4 broke everything that
made sense. Things became wildly more complicated.

I'm now extremely happy with my new router of choice router5 (not to be
confused with React Router 5)
[https://router5.js.org](https://router5.js.org).

~~~
SaturateDK
Oh, this looks promising. I'm pretty tired of react-router, and I like to keep
my navigation in my redux state, as it's a big part of any application state
in my mind.

How well does router5 work with redux? I see they have an official package for
it, so it's looking good, but maybe you have first hand experience.

~~~
eatonphil
Very well. We've been using it for 1.5yr at work, keeping up-to-date with
latest React and Redux.

------
joshwcomeau
Hi reader unfamiliar with React Router! Just a heads up - these comments are
not representative of typical React Router users. I work with React Router
every day, and my co-workers and I love it.

Something about HN gives people license to air all of their nitpick
grievances, and make it seem like SUcH A bIg DEaL OmG WorST LiBRarY EVArR!11

To the authors, maintainers, and contributors: Thank you for making the
ecosystem better. It makes our work easier.

~~~
beaconstudios
> Hey reader - stop reading these comments! They provide a cynical,
> unrepresentative viewpoint.

You could prefix this to every HN thread in existence.

React-Router is reasonably good, and has some issues - like most open source
libraries.

------
davnicwil
Interesting to see the reason they had to do a major version bump, because of
the usage of ^ in their internal dependencies meaning that you could get a
mismatch between versions of the two internal sub packages react-router and
react-router-dom.

The solution? Pinning the version to an exact number.

I _always_ do this now as a policy, for everything, even when I'm using
lockfiles though it shouldn't strictly be necessary, because I've been burned
by ^ too many times. There's this ideal world expectation of ^ that it will
magically give you upgrades for free without changes in behaviour, but
breaking changes in behaviour occur _all the time_ in minor and patch version
updates in real world npm.

I think this is an intractable problem - mistakes will always be made, even
when people try really hard, and over 100s of dependencies in a project you're
therefore quite likely to see these mistakes fairly regularly.

------
anonova
I've never been a fan of React Router (mostly I don't get why defining routes
with components is a good thing) and have been pleasantly surprised with how
well Curi ([https://curi.js.org/](https://curi.js.org/)) works. It's nice to
see it's not completely tied to a JS framework.

~~~
mediumdeviation
> I don't get why defining routes with components is a good thing

It makes the routes reactive. This is not necessary for smaller projects, but
where it is needed this can be really helpful. The responsive route example
shows this off well [https://reacttraining.com/react-
router/core/guides/philosoph...](https://reacttraining.com/react-
router/core/guides/philosophy/responsive-routes)

~~~
Androider
I find the opposite true. Components based routing is fine for small
applications, but in a sizable application you will inevitable end up with
several things that doesn't fit nicely into the simplistic router component
model, and now you're shit out of luck and have to try to jimmy-rig in some
escape hatch.

It's a much more flexible model to have the router update your state in Redux
or whatever, and then you take care of all the rendering and component
hierarchies yourself.

------
jeswin
I recently implemented home grown routing in one of my apps - and was surpised
to see that it was about 30 lines of simple code. You don't really need to tie
yourself to a third party lib and risk future upgrades. Wrote about it here:
[https://medium.com/p/9e2c7b036b0](https://medium.com/p/9e2c7b036b0)

~~~
davnicwil
But if you don't want to risk future upgrades, you could also just not
upgrade?

I think react-router in particular have been pretty good about sending this
message with past major version changes.

------
steve_taylor
I had nothing but trouble whenever I used React Router. For example, sometimes
paths would be appended to the URL instead of replacing it, making it grow
indefinitely, and it wasn't obvious why.

There were two API rewrites in a short space of time and it was extremely
frustrating, especially since it seemed almost compulsory to be experienced
with React Router (along with Redux) to be taken seriously by recruiters.

For my own projects, I started using page.js years ago and haven't looked
back.

[https://github.com/visionmedia/page.js](https://github.com/visionmedia/page.js)

~~~
stackola
>sometimes paths would be appended to the URL instead of replacing it, making
it grow indefinitely

Do you have a publicPath in your webpack.conf?

`publicPath: "/"`

Also make sure you a linking to="/path", not to="path"

------
ryanflorence
Author here.

One more time for those in the back:

v0.x > v1 Breaking changes

v1 > v2 > v3 a couple obscure breaking changes, but practically none

 _18 months pass_

v3 > v4 New, composable design, basically a new project

v3 still maintained, 3.5 years no changes. v4 2 years, no changes.

v4 -> v5 was supposed to be 4.4, but an internal dependency '^' got us, so
best choice was version bump to prevent problems.

~~~
hazza1
I think it was the fact that v3 to 4 was "basically a new project" with a new
paradigm that earnt the reputation for breaking changes but then React Router
is such a marketable name I can see why you'd be reluctant to spin off a new
project.

------
mychael
I advise everyone to move away from React Router.

Maintainers who have such blatant disregard for users should not be rewarded
or celebrated.

~~~
a13n
That's weird, I've had nothing but a great experience with the React Router
team. Can you point to an example?

------
binarynate
I'm surprised to see so many negative comments about react-router here. I've
used react-router v4 in a half dozen projects without significant issues, and
I think the API is pretty flexible and easy to work with. I'm glad to see the
React Training folks continue working on it.

------
mhd
This is going to be awesome for React's apparent main industry: Training. A
new set of videos and code camps...

~~~
phponpcp
Lol now that you mention this, it makes the React community make way more
sense to me.

------
neya
As someone who works with both React and VueJS on a daily basis, I find Vue
Router to be much MUCH easier to work with, well documented and is really
straightforward. Most importantly - It's an official package from VueJS core
team and not a third party, so it's pretty much worry-free.

~~~
pier25
I totally agree. Vue Router always made more sense to me.

I wrote my own router for Inferno/React and Mobx inspired by Vue Router. It
never made much sense to me to use components to define routes, or needing to
use a HoC to be able to access the router from a component.

------
urs2102
Probably the least stressful major version bump I've seen. Props to the team
for solving the 4.4.x problem and pushing this out. Took a few minutes to
update and now everything is great!

------
dmitryminkovsky
May I take this opportunity to recommend found? It’s great:
[https://github.com/4Catalyzer/found](https://github.com/4Catalyzer/found).

------
notamaan
Here's an alternative which is being actively maintained:
[https://github.com/frontarm/navi](https://github.com/frontarm/navi)

------
antihero
My heart warmed when they said they were maintaining backwards compatibility.

------
princesse
So many negative comments in here. Just wanted to let the maintainers know we
use the library in multiple projects without issue and that we appreciate
deeply the work that goes into it!

------
kabes
Anybody using ui-router? I used to use that one in angular and saw they have a
react version now. But I'm not yet familiar enough with react to judge it.

------
revskill
Using React Component for routing has a benefit: Universal Routing, with all
benefits of React inside the route itself (lifecycle, state, data
fetching,...).

------
ivanhoe
> There are no breaking changes in this release.

Nice, glad to see the project becoming more stable. Upgrading from v3 to v4
made us a lot problems...

------
mattdeboard
Exemplary release notes.

