Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

React Router v5

reacttraining.com

Post reply on HN
Print view View original

71–80 of 90 posts

Re: React Router v5

#71

Post by jamesknelson »

charliepark wrote: post #29
johnfn wrote: post #26

Earlier quoted context omitted.

> The solution to the external links issue is a one-liner. It is most definitely not a one-liner. > Making the page scroll to the top when navigating to a new page is trivial. So do it for me. There’s no reason a routing library should break default behavior. > That's exactly what it's supposed to do. It's a client side routing solution. (I'm also pretty sure that it doesn't remount) Then it’s “supposed” to have inco…

> So do it for me. I think this will work: Put this wherever you put your reusable functions: `const scrollToTop = () => document.getElementById('root').scrollIntoView();` And put this in the components / functions you want the scrollToTop effect to work on: `useEffect(() => { scrollToTop() }, []);` And put this in your CSS: `html { scroll-behavior: smooth }` (Edit to add: Not saying React Router is something you sho…

This is a nice and simple solution! Just keep in mind that it'll interact badly with the browser's scroll-to-hash functionality.

A full solution is a little more tricky, and probably involves code on multiple components:

- You'll need something to scroll to the top or the current hash on load - You'll also need code on components to check if they link to the current URL/hash, and if they're pointing to the current hash, you'll need to scroll to it on click.

Here's some relevant scroll management code from Navi's components:

- https://github.com/frontarm/navi/blob/master/packages/react-...

- https://github.com/frontarm/navi/blob/master/packages/react-...

Re: React Router v5

#72

Post by stickfigure »

sorahn wrote: post #53
johnfn wrote: post #13

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/…

> there's no relative routes https://github.com/ReactTraining/react-router/issues/2172 I've been managing "relative" routes by just using `match.path` and `match.url` from the previous route. Works fine. function Parent(props) { return ( Child ); } function Child({match}) { return ( Grandchild ) }

I also do this - 4 layers deep at times - and it works great. IMHO it's one of the more clever bits of react-router.

Re: React Router v5

#73

Post by jamesknelson »

anonytrary wrote: post #49
davedx wrote: post #18

Earlier quoted context omitted.

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.

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.

Yeah, this is definitely a thing. I'm a bit conflicted over it.

One one hand, staying within the world of React components gives you a lot of functionality for free. And with Suspense and Hooks, the amount you can do within a component has become even greater.

On the other hand, there are still things that you can't do within a component. For example, you can't easily run an async function once when the component mounts - which in my opinion, would be the perfect way to fetch data.

I've been building Navi to try and create a more natural way to map routes to views and a stream of data. The thing is, the more edge cases you cover, the closer it becomes to just building React from scratch.

At this point I still think that routing and data fetching is better handled externally from React, but it's less clear cut than it used to be.

Re: React Router v5

#74

Post by dfa1234 »

johnfn wrote: post #13

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/…

That would never be a mess like the router in Ionic 3 (they abandoned it in Ionic 4 a the bugs will never be fixed, it's a nightmare on a daily basis, and migrating from 3 to 4 is a nightmare also)

Re: React Router v5

#75

Post by beaconstudios »

joshwcomeau wrote: post #68

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 ecosyst…

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

Re: React Router v5

#76

Post by [deleted] »

johnfn wrote: post #38
lopatin wrote: post #28

Earlier quoted context omitted.

> It is most definitely not a one-liner. const LinkWrapper = ({to, ...rest}) => to.startsWith(window.location.origin) ? : ; > So do it for me. There’s no reason a routing library should break default behavior. It's not default behavior for a client side router. Making it automatically scroll to the top would save you a few lines of code while creating a monumental headache for those who need it to retain the scroll p…

This has a number of bugs. Links don’t have to start with window.location.origin, they can just start with /. You didn’t pass in ...rest into the a tag, but oh did you know that the props of a are not the same type as the props to Link? They’re not - so even if you did that it wouldn’t have worked. Oh, and don’t forget to handle “javascript:” prefixed links - those are valid too. Oh and good luck getting this to type…

[deleted]

Re: React Router v5

#77

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

Re: React Router v5

#78

Post by pier25 »

neya wrote: post #11

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.

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.

Re: React Router v5

#79

Post by wayneftw »

mediumdeviation wrote: post #25
anonova wrote: post #12

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.

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

Views 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: `` and the custom PageLink component basically gets everything it needs to render the normal `` 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.

Re: React Router v5

#80

Post by stackola »

steve_taylor wrote: post #55

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

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

Post reply on HN