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

21–30 of 90 posts

Re: React Router v5

#21

Post by lopatin »

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

> React router's do not allow you to link outside of the current site

Both valid points. Not show stoppers though. And not enough to make me regret using the library. The solution to the external links issue is a one-liner.

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

That is your responsibility. Why do you need the routing library to handle page refreshing for you?

> the scroll position will stick when you navigate to a new route

Making the page scroll to the top when navigating to a new page is trivial. I would 100% rather have this problem instead of the opposite: scroll jumping to the top when I don't want it to. That's so much harder to fix.

> 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

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)

From the issues that you've had with the library, it seems like client side routing is not actually what you're looking for. If you regret using it so much, may I ask what the alternative would be?

IMO a project either needs client side routing, or it doesn't. If it does, then React Router is the obvious choice. Otherwise, of course, don't use it and save yourself from unnecessary complexity.

Re: React Router v5

#22

Post by waingake »

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

I recently wrote a custom hook* which is serving me well so far.

https://gist.github.com/tim-field/99104278abfad1b8dd94d26717...

I combine this with a simple switch statement in my main component and it does the job.

  const [page, setPage] = useRouter('/')
*https://reactjs.org/docs/hooks-custom.html

Re: React Router v5

#23

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

Re: React Router v5

#24

Post by geewee »

anurag wrote: post #5

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.

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

Re: React Router v5

#25

Post by mediumdeviation »

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

Re: React Router v5

#26

Post by johnfn »

lopatin wrote: post #21
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 > React router's do not allow you to link outside of the current site Both valid points. Not show stoppers though. And not enough to make me regret using the library. The solution to the external links issue is a one-liner. > there's no way to refresh the page https://github.com/ReactTraining/react-router/issues/1982 ("that's your responsibility, not ours") That is your responsibility. Wh…

> 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 inconsistent behavior. Navigating anywhere else in my site will call constructors to all my components. Navigating to the same page won’t.

> From the issues that you've had with the library, it seems like client side routing is not actually what you're looking for.

My site was a music site. I wanted clientside routing so I could keep music playing while you navigated between links. Seemed like a slam dunk for clientside routing to me.

> may I ask what the alternative would be?

Quite honestly I would go onto GitHub and look for any routing solution that didn’t have multiple closed unfixed issues with hundreds of thumbs up.

Re: React Router v5

#27

Post by crispyporkbites »

realusername wrote: post #3
mythz wrote: post #2

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.

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.

Why upgrade?

Re: React Router v5

#28

Post by lopatin »

johnfn wrote: post #26
lopatin wrote: post #21

Earlier quoted context omitted.

> there's no relative routes > React router's do not allow you to link outside of the current site Both valid points. Not show stoppers though. And not enough to make me regret using the library. The solution to the external links issue is a one-liner. > there's no way to refresh the page https://github.com/ReactTraining/react-router/issues/1982 ("that's your responsibility, not ours") That is your responsibility. Wh…

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

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

Re: React Router v5

#29

Post by charliepark »

johnfn wrote: post #26
lopatin wrote: post #21

Earlier quoted context omitted.

> there's no relative routes > React router's do not allow you to link outside of the current site Both valid points. Not show stoppers though. And not enough to make me regret using the library. The solution to the external links issue is a one-liner. > there's no way to refresh the page https://github.com/ReactTraining/react-router/issues/1982 ("that's your responsibility, not ours") That is your responsibility. Wh…

> 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 should / shouldn’t use. Just wanted to share that code in case it helps unblock anyone.)

Re: React Router v5

#30

Post by davnicwil »

jeswin wrote: post #10

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

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.

Post reply on HN