from Hacker News

React Router v5

by jsdev93 on 3/21/19, 4:22 AM with 87 comments

  • by johnfn on 3/21/19, 5:48 AM

    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

    * there's no way to refresh the page 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

    * React router's <Link> do not allow you to link outside of the current site 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

  • by mythz on 3/21/19, 4:43 AM

    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.

  • by anurag on 3/21/19, 5:03 AM

    We migrated from React Router to Reach 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.

  • by codesparkle on 3/21/19, 9:45 AM

    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

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

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

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

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

  • by artellectual on 3/21/19, 5:52 AM

    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.

  • by joshwcomeau on 3/21/19, 1:41 PM

    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.

  • by davnicwil on 3/21/19, 7:51 AM

    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.

  • by anonova on 3/21/19, 5:45 AM

    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/) works. It's nice to see it's not completely tied to a JS framework.

  • by jeswin on 3/21/19, 5:42 AM

    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

  • by steve_taylor on 3/21/19, 11:26 AM

    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

  • by ryanflorence on 3/21/19, 6:13 PM

    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.

  • by mychael on 3/21/19, 8:39 AM

    I advise everyone to move away from React Router.

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

  • by binarynate on 3/21/19, 6:20 AM

    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.

  • by mhd on 3/21/19, 7:59 AM

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

  • by neya on 3/21/19, 5:43 AM

    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.

  • by urs2102 on 3/21/19, 5:10 AM

    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!

  • by dmitryminkovsky on 3/21/19, 6:05 AM

    May I take this opportunity to recommend found? It’s great: https://github.com/4Catalyzer/found.

  • by notamaan on 3/21/19, 10:20 AM

    Here's an alternative which is being actively maintained: https://github.com/frontarm/navi

  • by antihero on 3/21/19, 9:02 AM

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

  • by princesse on 3/22/19, 4:08 AM

    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!

  • by kabes on 3/22/19, 6:36 AM

    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.

  • by revskill on 3/21/19, 6:28 PM

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

  • by ivanhoe on 3/21/19, 3:07 PM

    > 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...

  • by mattdeboard on 3/21/19, 4:51 AM

    Exemplary release notes.