4 ms·

I mean this in a nice way, I'd really appreciate a gist showing how you get the core concept of react-router in 50 lines. It's in a project of mine now and mayb

I mean this in a nice way, I'd really appreciate a gist showing how you get the core concept of react-router in 50 lines. It's in a project of mine now and maybe it shouldn't be.

mieseratte 8y ago
Well, it really boils down to const path = findThePath(); class Router extends Component { render() { if (path === "/about") return <About /> else if (path.match(someRegex)) { const data = parseSomePath(path); return <Page { ...data } /> } else { return <Default /> } } } Seems as though React Router has gotten a bit complex because it's abstracted away from the concept of a webpage, such that one can use it in the browser, or React Native (which can be a number of environments). Of course, I say just buck-up and learn the damn thing, it isn't that complex... earn the "Engineer" in your job title! Maybe I'm just an out-of-touch neckbeard these days?
- danvayn 8y ago
  Just a small addendum to your post -- you shouldn't use react router for react native, you should use react-navigation for that (https://reactnavigation.org/ https://reactnavigation.org/).
  - mieseratte 8y ago
    Fair enough. I'm not particularly qualified to speak about React Native, having only done toy apps.
  - connorelsea 8y ago
    I use react-router for native and there is a react-router-native package. You "shouldn't" listen to randos on the internet when they are demanding what you use or don't use.
- sli 8y ago
  React Router v4 is particularly difficult to get used to when compared to earlier versions. While I don't much mind it (I get it working, then I don't need to touch it anymore), it definitely took me some time to wrap my head around it. So yeah, it works good when you get it working, so yeah, the best thing to do is to just buck up and learn if it you need it. But boy does it suck getting there. All of that said, I don't understand where this view comes from that Redux is extremely confusing. It can indeed sprawl a little. Say, if you keep you containers, reducers, and actions in their own directory trees. The overall architecture didn't take me very long to grasp and start to leverage. Plenty of folks find their home in Flux or MobX instead, but I'd have to guess that a lot of the confusion is actually confusion about state containers and their uses.
  - mieseratte 8y ago
    Partly, the fact that React-Router has upgraded so many times in divergent ways in a short amount of time has left many folks with a bad taste in their mouth. If the router was just "Buck up, learn it, and you're golden" I suspect we wouldn't hear too much hollering about it. Unfortunately, the hassle of using it is so close to clockwork I feel like I should just schedule a week every six months or so for maintenance.
    - tptacek 8y ago
      What's the win to keeping up with it? Am I wrong that the problem it's solving is really pretty simple? I had the same problem with react-bootstrap, which I used for about a year and ran into regular upgrade compat problems. I wouldn't mind that much except that wrapping a React component around a fragment of HTML is not a problem so difficult that I'd endure compat problems in a dep to solve it.
      - mieseratte 8y ago
        > What's the win to keeping up with it? With the router, it was never a matter of us just deciding to upgrade for the sake of upgrading but rather ending up being painted in a corner with peer dependencies requiring upgrade. Additionally, because we were a micro service / many SPA outfit, we ended up with a dozen or more applications at varying levels of libraries so you had to deal with 2.x, 3.x, and 4.x or just upgrade. For those of you reading along thinking "This sounds like a dysfunctional environment!" You're right! Imagine having five heads of department, albeit two interim, in a year. > I had the same problem with react-bootstrap, which I used for about a year and ran into regular upgrade compat problems. I'm in the middle of building out an internal component library based on `react-bootstrap`, so that's fun to hear... Have your issues mostly been upgrades of the library? Or of Bootstrap versions? We internally decided we're just sticking with Bootstrap 3 for the foreseeable future with the hope that it will mean we don't have many issues to deal with.
- jholman 8y ago
  The absolute most important thing in ReactRouter does indeed boil down to what you said, no disagreement. But there are some niceties, if I'm not mistaken. You want the things in your app that look like links to have some interesting behaviour. They should look like links, they should act like links when right-clicked.... but when left-clicked, they should not actually load the new page. Instead, they should update the History and also trigger the router to reconsider the routing. That's why ReactRouter includes Links and Redirects. I suspect there's at least one other feature-of-some-utility in it that I can't think of right now. Hmn. There's also some weird logic around multi-routing, which I suspect is a bug rather than a feature, but maybe there's a sweet use-case. And there's also some weird stuff about not propagating children, which seems like a bug not a feature, but the workaround is easy, and again maybe there's actually a good reason, I dunno. Anyway, as with what you talked about, this isn't rocket science, you could do it yourself with some work. But if someone follows your advice and thinks that's the end of it, they'll eventually feel some minor pain points. That said, I honestly can't be bothered to actually properly learn React Router. I think that some company, ideally one specializing in react training, should write better documentation for it.
danvayn 8y ago
Here's an article from tyler mcginnis on building your own react router: https://tylermcginnis.com/build-your-own-react-router-v4/ https://tylermcginnis.com/build-your-own-react-router-v4/ He teaches a good chunk of the react nanodegree course on Udacity and has a lot of good blogs on react.
tptacek 8y ago
You have a top-level component whose render function retrieves the current URL, checks it against a bunch of regexes, and based on that decides which "page" to actually render. The regexes capture "parameters" in the URL with capture groups, and they're passed as props. You also have a few (single-digit) lines of code to wire up the history API so that the back button works. You have a tiny helper function that uses the history API to directly navigate to a URL inside your application. You have a tiny Component that renders an <a>...</a> whose onClick calls that helper function. I'm sure React Router does a lot more than this. I mean, it'd have to, right? It's so complicated. But I don't know what those things are, because until I'm forced to, I'm not going to bother with it. Similarly: I appreciate flux and think Redux is a reasonable implementation of it, but at this point, after doing a couple applications with it, I'm going to get as far as I can with a simple EventEmitter and hierarchical state before I bring it into a project. For straightforward applications --- really, a pretty big chunk of the apps I see are fundamentally straightforward --- I don't think it's a win.
- randomdata 8y ago
  With respect to Flux/Redux, the Facebook team even stressed when they originally released Flux that it should be used sparingly. It is useful in some circumstances, particularly that which it was originally designed for, but it seems in my experience that it often used, unnecessarily, as a stand in for a controller (in MVC terms) layer. When React was originally released it was sold only as a view layer that you plug into your application stack. Since no official way of approaching the rest of the stack emerged from Facebook, when Flux was announced it seems that it was taken as the rest of the stack by many.
_hardwaregeek 8y ago
This is a great talk by Ryan Florence (one of the creators of React Router) where he basically reimplements the basics of the library from scratch: https://www.youtube.com/watch?v=wPJxmZx62gI https://www.youtube.com/watch?v=wPJxmZx62gI I'd also just look at the React Router codebase. The components are pretty well written and somewhat easy to understand: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Route.js https://github.com/ReactTraining/react-router/blob/master/pa...

I mean this in a nice way, I'd really appreciate a gist showing how you get the core concept of react-router in 50 lines. It's in a project of mine now and maybe it shouldn't be.

mieseratte 8y ago

Well, it really boils down to const path = findThePath(); class Router extends Component { render() { if (path === "/about") return <About /> else if (path.match(someRegex)) { const data = parseSomePath(path); return <Page { ...data } /> } else { return <Default /> } } } Seems as though React Router has gotten a bit complex because it's abstracted away from the concept of a webpage, such that one can use it in the browser, or React Native (which can be a number of environments). Of course, I say just buck-up and learn the damn thing, it isn't that complex... earn the "Engineer" in your job title! Maybe I'm just an out-of-touch neckbeard these days?

danvayn 8y ago
Just a small addendum to your post -- you shouldn't use react router for react native, you should use react-navigation for that (https://reactnavigation.org/ https://reactnavigation.org/).
- mieseratte 8y ago
  Fair enough. I'm not particularly qualified to speak about React Native, having only done toy apps.
- connorelsea 8y ago
  I use react-router for native and there is a react-router-native package. You "shouldn't" listen to randos on the internet when they are demanding what you use or don't use.
sli 8y ago
React Router v4 is particularly difficult to get used to when compared to earlier versions. While I don't much mind it (I get it working, then I don't need to touch it anymore), it definitely took me some time to wrap my head around it. So yeah, it works good when you get it working, so yeah, the best thing to do is to just buck up and learn if it you need it. But boy does it suck getting there. All of that said, I don't understand where this view comes from that Redux is extremely confusing. It can indeed sprawl a little. Say, if you keep you containers, reducers, and actions in their own directory trees. The overall architecture didn't take me very long to grasp and start to leverage. Plenty of folks find their home in Flux or MobX instead, but I'd have to guess that a lot of the confusion is actually confusion about state containers and their uses.
- mieseratte 8y ago
  Partly, the fact that React-Router has upgraded so many times in divergent ways in a short amount of time has left many folks with a bad taste in their mouth. If the router was just "Buck up, learn it, and you're golden" I suspect we wouldn't hear too much hollering about it. Unfortunately, the hassle of using it is so close to clockwork I feel like I should just schedule a week every six months or so for maintenance.
  - tptacek 8y ago
    What's the win to keeping up with it? Am I wrong that the problem it's solving is really pretty simple? I had the same problem with react-bootstrap, which I used for about a year and ran into regular upgrade compat problems. I wouldn't mind that much except that wrapping a React component around a fragment of HTML is not a problem so difficult that I'd endure compat problems in a dep to solve it.
    - mieseratte 8y ago
      > What's the win to keeping up with it? With the router, it was never a matter of us just deciding to upgrade for the sake of upgrading but rather ending up being painted in a corner with peer dependencies requiring upgrade. Additionally, because we were a micro service / many SPA outfit, we ended up with a dozen or more applications at varying levels of libraries so you had to deal with 2.x, 3.x, and 4.x or just upgrade. For those of you reading along thinking "This sounds like a dysfunctional environment!" You're right! Imagine having five heads of department, albeit two interim, in a year. > I had the same problem with react-bootstrap, which I used for about a year and ran into regular upgrade compat problems. I'm in the middle of building out an internal component library based on `react-bootstrap`, so that's fun to hear... Have your issues mostly been upgrades of the library? Or of Bootstrap versions? We internally decided we're just sticking with Bootstrap 3 for the foreseeable future with the hope that it will mean we don't have many issues to deal with.
jholman 8y ago
The absolute most important thing in ReactRouter does indeed boil down to what you said, no disagreement. But there are some niceties, if I'm not mistaken. You want the things in your app that look like links to have some interesting behaviour. They should look like links, they should act like links when right-clicked.... but when left-clicked, they should not actually load the new page. Instead, they should update the History and also trigger the router to reconsider the routing. That's why ReactRouter includes Links and Redirects. I suspect there's at least one other feature-of-some-utility in it that I can't think of right now. Hmn. There's also some weird logic around multi-routing, which I suspect is a bug rather than a feature, but maybe there's a sweet use-case. And there's also some weird stuff about not propagating children, which seems like a bug not a feature, but the workaround is easy, and again maybe there's actually a good reason, I dunno. Anyway, as with what you talked about, this isn't rocket science, you could do it yourself with some work. But if someone follows your advice and thinks that's the end of it, they'll eventually feel some minor pain points. That said, I honestly can't be bothered to actually properly learn React Router. I think that some company, ideally one specializing in react training, should write better documentation for it.

danvayn 8y ago

Here's an article from tyler mcginnis on building your own react router: https://tylermcginnis.com/build-your-own-react-router-v4/ https://tylermcginnis.com/build-your-own-react-router-v4/ He teaches a good chunk of the react nanodegree course on Udacity and has a lot of good blogs on react.

tptacek 8y ago

You have a top-level component whose render function retrieves the current URL, checks it against a bunch of regexes, and based on that decides which "page" to actually render. The regexes capture "parameters" in the URL with capture groups, and they're passed as props. You also have a few (single-digit) lines of code to wire up the history API so that the back button works. You have a tiny helper function that uses the history API to directly navigate to a URL inside your application. You have a tiny Component that renders an <a>...</a> whose onClick calls that helper function. I'm sure React Router does a lot more than this. I mean, it'd have to, right? It's so complicated. But I don't know what those things are, because until I'm forced to, I'm not going to bother with it. Similarly: I appreciate flux and think Redux is a reasonable implementation of it, but at this point, after doing a couple applications with it, I'm going to get as far as I can with a simple EventEmitter and hierarchical state before I bring it into a project. For straightforward applications --- really, a pretty big chunk of the apps I see are fundamentally straightforward --- I don't think it's a win.

randomdata 8y ago
With respect to Flux/Redux, the Facebook team even stressed when they originally released Flux that it should be used sparingly. It is useful in some circumstances, particularly that which it was originally designed for, but it seems in my experience that it often used, unnecessarily, as a stand in for a controller (in MVC terms) layer. When React was originally released it was sold only as a view layer that you plug into your application stack. Since no official way of approaching the rest of the stack emerged from Facebook, when Flux was announced it seems that it was taken as the rest of the stack by many.

_hardwaregeek 8y ago

This is a great talk by Ryan Florence (one of the creators of React Router) where he basically reimplements the basics of the library from scratch: https://www.youtube.com/watch?v=wPJxmZx62gI https://www.youtube.com/watch?v=wPJxmZx62gI I'd also just look at the React Router codebase. The components are pretty well written and somewhat easy to understand: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Route.js https://github.com/ReactTraining/react-router/blob/master/pa...