21 ms·
React Router v5
- mythz 8y agoI 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 8y agoYeah 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 8y agoWhy upgrade?
- realusername 8y agoBecause 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.
- coldtea 8y agoBecause sooner of later you'll have to. Upgrading frequently minimizes the delta.
- kin 8y agoSame reaction here! Jumping from 2 -> 4 was a pretty big change to our codebase. Glad for this.
- silverwind 8y agoApparently it was never meant to be a major bump, but they were forced to do it because of a semver screwup between their own packages. All the changes were already in 4.4.0 published one day earlier, which they've now unpublished it seems.
- mattdeboard 8y agoExemplary release notes.
- anurag 8y agoWe 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.
- wilsonrocks 8y agoThis looks great! Thank you
- thejosh 8y agoThis looks very similar to preact router.
- geewee 8y agoWe did the same thing, then migrated back to React-Router. We had issues getting relative urls and redirects to work, examples were hard to come by, and generally the experience was just poorer than React-Router.
- balac 8y agoI did the same as you, initially reach router seemed like a great alternative, but it really doesn't feel finished, updates are few and far inbetween, and there is a large backlog of open issues / PRs.
- traderjane 8y agoI get the sense that Reach Router is no longer maintained despite what the project owner says, plus there's the fact that he's been rehired into the React Router team.
- frosted-flakes 8y agoWell, at least one major project (Gatsby) uses it, so I bet it will stick around for a while yet. I don't think Gatsby could switch back to React-Router without introducing breaking changes.
- urs2102 8y agoProbably 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!
- jeswin 8y agoI 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 8y agoBut 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.
- neya 8y agoAs 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 8y agoI 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.
- anonova 8y agoI'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.
- shirakawasuna 8y agoThat looks very, very similar to router5. Anything about it that stands out as better in Curi?
- mediumdeviation 8y ago> 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/philosophy/responsive-routes https://reacttraining.com/react-router/core/guides/philosoph...
- Androider 8y agoI 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.
- ghusbands 8y agoThat link suggests routing a user to a different page when they rotate their phone and not routing them back when they rotate it back. Rerouting a user just because they rotate their phone is a terrible idea.
- wayneftw 8y agoViews should react to things like screen size, routes should route. There's really no relation between them and mixing these 2 functionalities has been a recipe for disaster in every app where I've seen it used because finding route definitions becomes a major chore. It also results in having duplicate route paths all over the place and renaming a path is painful. We still use react-router but wrap it with code that generates all the routes off of our own object structure which describes the pages. Instead of using a string path to create links, we use page definition objects like this: `<PageLink to={Pages.user.account} />` and the custom PageLink component basically gets everything it needs to render the normal `<Link>` from the `account` object including the default display text of the link, authorization required to visit the page, etc. Another thing we've had to do in every single project with React Router was to stop using the `history` prop and start creating our own `history` object that we can then import anywhere, not just in view code... We basically have a whole kit that wraps React Router at this point and it's much, much more predictable and maintainable than defining things in JSX.
- johnfn 8y agoUsing 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
- mythz 8y agoI felt the same regret after each major upgrade where it seemed as breaking versions were due to unnecessary superficial API changes (which also left behind a trail of outdated docs/examples). Ended up sticking through it as it appeared to be the default Router for React. It looks like there's some options now, so I'll consider moving if I have to suffer through another major breaking change.
- davedx 8y agoYup. 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 8y ago
- artellectual 8y agoI 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.
- Androider 8y agoThank you, this looks excellent! Finally a router that doesn't force you to define your UI by splitting everything up into their top-level view components. I want the router to give me the state, and then get the hell out of the way so I can fully manage the UI myself. I've had a look at react-router multiple times over the years, and the best thing going for them seems to have been that they managed to squat that generic name early on. From the docs and GitHub, it's always been abundantly clear that the "current version sucks, mistakes were made, next version will totally fix everything" again and again.
- dmitriid 8y agoRouter5 is awesome (but needs some getting used to). I remember being so fed up with React Router that I spent sometime implementing some functionality that existed in React Router before 1.x, and that still is missing (like route names). And used router5 for that. Didn't even need that many hacks: https://gist.github.com/dmitriid/675ceff4bd07ec6cdf06a560d7262407 https://gist.github.com/dmitriid/675ceff4bd07ec6cdf06a560d72...
- whs 8y agoI tried router5 in our team and found that while it is more powerful, 1. Having to write middleware for many things is quite hard for junior devs, as it requires deep understanding of how router works. (We have middleware for dependency injection, MobX per-page store, data fetching, auth check) 2. Due to the tree-based router design, some routes are impossible. See https://github.com/troch/route-node/issues/17 https://github.com/troch/route-node/issues/17 https://github.com/troch/route-node/issues/18 https://github.com/troch/route-node/issues/18 I still haven't found router of my choice yet. Maybe router5 without route-note could work for me, but I still wouldn't recommend it to any team.
- 8y ago
- dmitryminkovsky 8y agoMay I take this opportunity to recommend found? It’s great: https://github.com/4Catalyzer/found https://github.com/4Catalyzer/found.
- binarynate 8y agoI'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.
- davnicwil 8y agoInteresting 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.
- mhd 8y agoThis is going to be awesome for React's apparent main industry: Training. A new set of videos and code camps...
- phponpcp 8y agoLol now that you mention this, it makes the React community make way more sense to me.
- mychael 8y agoI advise everyone to move away from React Router. Maintainers who have such blatant disregard for users should not be rewarded or celebrated.
- rat9988 8y agoMay I ask what are you making reference to? And do you happen to know a better library?
- a13n 8y agoThat's weird, I've had nothing but a great experience with the React Router team. Can you point to an example?
- lkbr 8y agoHow is you using someone else's open source package "rewarding" them? I think that when someone provides an open source project they are doing everyone a favour. We then have a choice not to use it. But using their free thing is certainly not doing them a favour unless we are somehow contributing back.
- antihero 8y agoMy heart warmed when they said they were maintaining backwards compatibility.
- codesparkle 8y agoreact-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/e850bcd9297398653a79b903f35818cb2df7738c https://github.com/pshrmn/curi/commit/e850bcd9297398653a79b9... [5]: https://github.com/ReactTraining/history/pull/656 https://github.com/ReactTraining/history/pull/656
- laurent123456 8y agoThis [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-c0634631ce0ed08197ba5cf4643ca0cfR37 https://github.com/ReactTraining/history/pull/465/files#diff...
- notamaan 8y agoHere's an alternative which is being actively maintained: https://github.com/frontarm/navi https://github.com/frontarm/navi
- steve_taylor 8y agoI 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
- mercer 8y agoSame here. I've had trouble with every version of React Router that I've used, and page.js seemed to always do pretty much exactly what I wanted. I'm assuming that perhaps React Router is preferable beyond a certain amount of complexity? Can anyone chime in where page.js falls short?
- stackola 8y ago>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"
- deleted 8y ago[deleted]
- joshwcomeau 8y agoHi 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 8y ago> 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.
- ivanhoe 8y ago> 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...
- ryanflorence 8y agoAuthor 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 8y agoI 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.
- revskill 8y agoUsing React Component for routing has a benefit: Universal Routing, with all benefits of React inside the route itself (lifecycle, state, data fetching,...).
- princesse 8y agoSo 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 8y agoAnybody 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.