19 ms·
React Router v4 FAQ
- joshkpeterson 10y agoAs someone just arriving to React - should I just learn React Router v4?
- mosen 10y agoYes.
- bondpbond 10y agoI would focus on learning React(maybe look into create-react-app). Once you're solid on that, then v4 should be stable enough to dive into head first.
- mercurial 10y agoProbably v5 at that point.
- tptacek 10y agoNo. Avoid react-router. If you really need it (you probably won't), you'll know it. Do react-router last. Way last.
- mjackson 10y agoHi, one of the authors of the router here :) Try to insert routing only when you need it. When you're ready for a router, react-router is a great choice. Lots of people are already using it with great success, and you'll find a great community of people willing to help you out.
- brendonjohn 10y agoYes, I like this. It's important to learn what react is and why it's good for handling state in a component before you start trying to build the routing of a full web app.
- danabramov 10y agoI suggest you to learn React itself first. No Redux, no routing, just React itself. Build a few small apps to get a feel for it. When you need routing, I suggest trying to use HTML5 pushState API. Figure out how to use it in React, and try to add routing to one of your apps. After that, I think React Router 4 is going to be a great next thing to try. Get a feel for it and use it if you like it and if it solves your problems. I think RR4 is shaping up to be much better than previous versions. Disclaimer: I work on the React team.
- guntars 10y agoIt's interesting just how long it can take to unlearn habits from previous programming experience and find a way to do things in harmony with the current tools you're using. Probably the more experienced and senior you are, the harder it gets.
- nine_k 10y agoTo the contrary, it gets easier. Many of the new things are older things I've seen in different contexts. Some of the new things are a welcome relief from shortcomings if old tools.
- hamandcheese 10y agoI recently noticed that reactjs/react-router redirects to ReactTraining/react-router. Does anyone know why that is?
- Touche 10y agoBecause they changed orgs and Github redirects it for you.
- hamandcheese 10y agoYes, but why did react-router move out of the reactjs org?
- spicyj 10y agoIt's always been Michael and Ryan's project. They wanted to move it back out -- I assume to help promote their training business -- and that seems perfectly fair to me.
- bronson 10y agoThey maintain React Router to help promote their training business? I suppose that could explain its instability.
- spicyj 10y agoNo, that's not why they built it (they built it before starting their business) and I don't believe it's why they maintain it.
- bentlegen 10y agoI just want to point out that whether they built it before or after starting their business doesn't really matter. It's definitely a part of how they promote React Training today (see: moving the project to the ReactTraining GitHub organization, or how many times react-router is mentioned on their marketing website). Not that I have a problem with that; all the more power to them. Especially if it helps support development of these libraries.
- n0us 10y agoI normally try to keep comments here reasoned and civil but the amount of churn in this library is almost so much of a joke that it should become a meme. At this point it's almost more expensive for me to continue updating than it would be to just fork the library and maintain the upgrades myself. Any time I have to touch react-router I just resign the idea that I'm going to have to take at minimum a day to work out the bugs that pop up with every upgrade, (even minor changes). > Why the huge change? (AGAIN?!) > tl;dr Declarative Composability The huge change is because the maintainers are apparently unwilling or incapable of either A. Creating something good enough on the first, second, or third attempt, or B. are completely oblivious to the needs of devs trying to create practical software and don't understand that project stability is just as important as a good API. Thanks but no thanks.
- kevan 10y ago>At this point it's almost more expensive for me to continue updating than it would be to just fork the library and maintain the upgrades myself. I got burned by this in my last big project, we resigned ourselves to never upgrading past 1.0.0-beta4.
- n0us 10y agoThere's a big difference between breaking changes which resolve real pain points in a language/framework/library, like the break between python 2 and 3 and changes that are just for the fun of it, because someone "felt like it was better". I like to view developing software as an investment. You are spending time and money outright, and there is an implicit cost in foregoing other opportunities when you make a technical choice. Investing in react-router is like investing in a clown. It's a total toss-up. The maintainers could all move on to whatever other hip lib and finally it will be stable, or you can continue betting large sums of money on what is basically a coin flip every 6 months: Are they going to screw with the library again (yes) and will it cause a bunch of bugs in my program (probably). It's a bad investment, esp if you try to upgrade. The ironic part of this is that honestly I feel like the V1 API is the best out of all of them. If they had just iterated and brought breaking changes that were actually needed instead of just those that they felt might be fun, the project would be much better for it in my opinion. (I know python <-> react-router comparison is apples to oranges but bear with me)
- breatheoften 10y agoLooks interesting -- what's up with that Redirect component though ...? That seems all kinds of strange to me conceptually. My mind is trying to justify it like this: Render me a component that's going to manage the state involved in transitioning to a new page ... I guess that kind of makes sense -- since a redirect is an inherently stateful process.
- marshallford 10y agoI too am confused by this. I found this GitHub issue [1] when searching for a withRouter HOC replacement. 1. https://github.com/ReactTraining/react-router/issues/3847 https://github.com/ReactTraining/react-router/issues/3847
- meira 10y agoGreat! I removed React router from a project yesterday, now it seems an even better decision. Edit: I didn't have any big issue with React router and don't dislike it. It just don't work well with clojurescript/rum. I'm now using a cljs lib called 'bidi' for bidirecional routing (data only) and a small logic to change content reactively based on selected route.
- marshallford 10y agoI'm curious, did you replace react-router with something else or are you managing the url "manually"?
- meira 10y agoWith a tiny cljs lib (bidi) and some 10 lines of code to change content reactively
- tptacek 10y agoSame! react-router is the only thing I've dealt with in this ecosystem that I truly, viscerally disliked.
- deleted 10y ago[deleted]
- kbeckmann 10y agoWhat are you using instead, can you recommend a nice alternative?
- wesleytodd 10y agoMy team uses this: https://github.com/wesleytodd/nighthawk https://github.com/wesleytodd/nighthawk Basically it is just the Express router wrapped with logic from Page.js for catching link clicks and what not. We do universal rendering with a simple middleware and share all our middleware, rendering and route definitions on both the FE and BE.
- kfinley 10y agoInteresting change. If I understand correctly, basically you have a base component that updates fragments of the UI based on the route. const App = () => ( <BrowserRouter> <h1>Hello World</h1> <Match exactly pattern="/" component={Home} /> <Match pattern="/about" component={About} /> <Miss component={NoMatch}/> </BrowserRouter> ) Couldn't we take it one step farther and just use a switch statement? It seems like using pure JavaScript would be more idiomatic React. The URL pattern could be parsed in the data layer, and passed down as props. That way the components don't rely on global state, making them easier to test. const App = (screen, args) => { let content; switch (screen) { case 'home': content = <Home args={args} /> break; case 'about': content = <About args={args} /> break; default: content = <NoMatch args={args} /> break; } return ( <div> <h1>Hello World</h1> {content} </div> ) } It's probably just a matter of preference. Recently I started using React-Storybook, so I've become addicted to "dumb" components.
- danabramov 10y agoFor testing, you can wrap your component in <MemoryRouter> and that will work just fine (including links and redirects, for example).
- hokkos 10y agoThanks you are the only one talking about the new api style here, it seems very interesting. It is like the dual of the previous version where all routes were declared in the same place, here we dispatch the route fragments in the app. It will simplify nested routes, but I hope it won't "infect" the app with routing concerns too much. I've ranted before about react-router, maybe they should call it another name this time, I hope they will keep on maintaining the v3.0, the switching cost will probably be too much for my app.
- timdorr 10y agoIt's more that you can get the information about the state of the browser or server's URL down deep into the component tree and then more easily act on it (with a few components, rather than a larger case statement). It's basically idiomatic JS vs idiomatic React/JSX.
- elmigranto 10y agoOkay. I understand that this library is kind of "learn as you go" project, much like React itself. But not make it on the third go… This is a part of React ecosystem that has not been reasonably "solved" (kind of like `redux` "solved" state-management good enough, or `express` solved server-side for Node good enough; and there are lots of iterations on those two), so if you want to start a popular OSS project, think hard about routing. (But really, think hard first!) I also like this joke from github readme: > Versioning and Stability > We want React Router to be a stable dependency that’s easy to keep current.
- psibi 10y agoIs there any other Router library for React which has a stable API ? We are most likely to include a router library in our application soon and we don't want something which changes frequently.
- ng12 10y agoI've been asking myself if I really need it. The very first React project I ever did I managed URLs by myself like I would have done in jQuery/Backbone. Honestly, I don't remember it being that bad.
- AgentME 10y agoI'm surprised at the number of negative comments about updates. You don't have to update. It will keep working. It's not like you're going to miss out and be left behind from some vast and vibrant react-router ecosystem. It's just a couple components that match strings up with other components and then barely matters to the rest of your application. It's exciting that there are people out there experimenting endlessly to figure out the best APIs to build things with. Just because someone comes up with one idea doesn't mean they're wed to supporting it forever. Or for any amount of time: react-router v3 is open source and you can maintain it yourself if you like it or just want to stick with it but want more.
- Klathmon 10y agoNo need to maintain v3 yourself, they will be maintaining it for you. >We intend to keep supporting the 3.x branch indefinitely (published separately on npm to aid in migration), although there will likely not be any future major versions based on that code. 4.0 is the future, but we won't leave you hanging if you want to stick with 2.x/3.x.
- beefsack 10y agoIt's interesting that a large amount of churn seems to be an unfortunately common trait of frontend libraries.
- jtchang 10y agoSo if you don't want to use react router what do you use for react client side routing?
- ChrisCinelli 10y agoI na previous project we were using https://github.com/kriasoft/universal-router https://github.com/kriasoft/universal-router (or at least a previous incarnation of it). We had to write some code around it. Just to throw an alternative here.
- ChrisCinelli 10y agoA one or two years ago I met a person that was using the backbone.js instead of a flux implementation for React. They were pretty happy with it. My memories of the Backbone router are pretty good memories.
- fooey 10y agoI've used page.js with React before was was fairly happy with it
- ChrisCinelli 10y agohttps://github.com/visionmedia/page.js https://github.com/visionmedia/page.js looks pretty simple. I supposed you are not using it for the server-side rendering. Or you have a route in express for any route on page.js. Correct?
- wesleytodd 10y agoIf you are interested, that link I posted above, Nighthawk, actually is a port of Page.js for its dom and pushstate handling wrapping the Express router, so it is just as simple. Here is the bulk of the code taken from page.js: https://github.com/wesleytodd/intercept-link-clicks/blob/master/index.js https://github.com/wesleytodd/intercept-link-clicks/blob/mas...
- connorelsea 10y ago
- zachrose 10y agoDisclaimer: I am a former Backbone-using developer who hasn't done much front-end work since React became so dominant. I just don't understand this project. I'm commenting to explain my confusion in the hopes that somebody else's perspective can help me see why React Router is helpful. When React came out it was billed as just the "V" in client-side MVC. While just about everybody has their own understanding of MVC, my interpretation of the "V" was that it was about things you can see. So React was going to take my data and maintain a UI based on that data without thrashing on the DOM. Cool! But nobody seemed to do that at first. They put HTTP requests all sorts of stuff inside the React component, and then handled the requesting, processing, and rendering as internal details to the component. Then the Flux idea came around, which was (I think) to brand one-directional events as "actions" and then smartly cache/reduce an ongoing stream of actions into a single data structure that represents lots of potentially disparate parts of your application. This also made some amount of sense to me. Surely there would be lots of things that could create actions: incoming DOM events representing a user's intentions, ajax responses that have potentially new facts about the world, websocket events, signals from the camera and microphone, and anything else that might cause a change in the overall state of the page. With the possible exception of DOM events, which the view should quickly translate into meaningful actions anyways, these actions are really not related to the "V" at all. So what benefit would I get from authoring the logic of URL-change handlers in JSX? Wouldn't it be nicer to write some JavaScript that handles those events and transforms them into actions?
- wesleytodd 10y ago> So what benefit would I get from authoring the logic of URL-change handlers in JSX? I don't get it either. I thought we were over describing program behavior in XML?
- jmakeig 10y agoI'd love some backstory on this too. I (kind of) understand JSX for HTML, but declaring routing rules seems very far from that.
- 10y ago
- boubiyeah 10y agoI use routers that aren't coupled to the view layer, thank you very much. routers can actually be pretty simple.
- colinramsay 10y agoExample?
- deleted 10y ago[deleted]
- wesleytodd 10y agohttps://github.com/wesleytodd/nighthawk https://github.com/wesleytodd/nighthawk ^^ This is the one we developed on my team. No view coupling, uses industry standard underlying components (Express Router), and layers on top of existing applications seamlessly (aka, no view tie in points, just anchor tags).
- ChrisCinelli 10y agoWhat does it add on top of https://github.com/wesleytodd/react-express-middleware https://github.com/wesleytodd/react-express-middleware ?
- wesleytodd 10y agoThat middleware is actually just a isomorphic render method, which uses express's render on the backend and react's render on the FE. So that middleware actually requires a solution similar to what Nighthawk provides. The point was to keep the routing and the rendering separate, unlike what react router does.
- connorelsea 10y agoI am new to React Router. What is the alternative to managing routes on the front end when you're using only React (and redux) on the frontend and not routing on the backend in express or something?
- deleted 10y ago[deleted]
- fibo 10y agoI started using react-router recently and I felt that some things were missing (like passing props to routes). I hope this release Will improve the API. Thanks to all the devs that keep moving forward this wonderful ecosustem.
- scarlac 10y agoAs far as I can tell, that part hasn't changed. But you're free to pass a HOC (Higher-Order-Component), ie. <BrowserRouter> <Match pattern="/" component={() => <MyComponent someProp="yep" someOtherProp={myOtherGlobalVar}/>}/> </BrowserRouter>
- mbrock 10y agoI think if/else statements with regexps, returning components, are my favorite "routing solution". Ridiculously simple, no dependency on someone else's weird ever-changing ideas about declarative composable component-based route paradigms, no need to write your routes in a markup language, everybody understands it, extensible as hell, trivial to debug—it's a glorious cascade of beautiful advantages. Try if/else today!
- antihero 10y agoJust a note: You can't scroll the docs (Chrome OSX).
- brendonjohn 10y agoIt took me over a week to grasp how routing would combine with redux, async, react and then server side rendering. We got there, but there just hasn't been a simple (to reason about) way to do this in javascript. Acknowledging that the current library is fighting (I would call it an anti-pattern) with react is probably a good step. Thanks devs!
- Klathmon 10y agoThey are going to support the old versions "indefinitely". The FAQ doesn't mention it, but their Release notes[0] does. I'll copy the relevant part here: >We intend to keep supporting the 3.x branch indefinitely (published separately on npm to aid in migration), although there will likely not be any future major versions based on that code. 4.0 is the future, but we won't leave you hanging if you want to stick with 2.x/3.x. [0]https://github.com/ReactTraining/react-router/releases/tag/v4.0.0-0 https://github.com/ReactTraining/react-router/releases/tag/v...
- patwolf 10y agoOne of the things that's burned me in the past with React Router is not just that the API changes from version to version but that documentation I'm reading at any given time doesn't indicate which version it refers to. I've wasted time trying to debug why things weren't working the way the documentation stated only to find that I was reading the wrong version of the documentation. Some advice for anyone that hosts docs outside of the git source tree, make the version information clear. For example, the express documentation http://expressjs.com/en/api.html http://expressjs.com/en/api.html states very clearly "4.x API".
- adregan 10y agoDuring the past year or so, as the "standard" React architecture has come to embrace keeping application state together in a global store, react-router looks a little out of place. Why should it maintain such a crucial part of the application state separate from the rest of the app? In reality, the best pattern for the future probably looks a lot more like "redux-router" than react-router.
- rcurry 10y agoAnybody else having trouble with the link that they provide to their "Quick Start" documentation? I can't see all the code unless I zoom out on it: https://react-router-website-xvufzcovng.now.sh/quick-start https://react-router-website-xvufzcovng.now.sh/quick-start
- timdorr 10y agoThat version of the site will work best with Chrome. The newer version will fix for Firefox: https://react-router-website-xvufzcovng.now.sh/ https://react-router-website-xvufzcovng.now.sh/ The next build (now.sh versions URLs) will have both working. Sorry about that!
- bostonvaulter2 10y agoQuick question, is it necessary to render a single component within a Router? All the examples except the quick-start example seem to do so.
- timdorr 10y agoYes, because we have to render props.children and normally Router is right under or near ReactDOM.render(), which only wants a single element from the component from the top of the tree. We were inserting a <div>, but that would screw over React Native users. So, unfortunately due to the structure of React, we have to enforce a single child. This is improved a little bit in git, where we do a React.Children.only check: https://github.com/ReactTraining/react-router/commit/5a74d46a9fcf1b9663ba42b238ba6dd4584983ab https://github.com/ReactTraining/react-router/commit/5a74d46...
- bostonvaulter2 10y agoAh yeah adding that check should help. I wasted a good 20 minutes trying to figure it out the other day. Can the quick-start example be updated to have a single child? I would submit a PR but I was unable to find the repo.
- 10y ago
- elliotec 10y ago[removed]
- sotojuan 10y agoHow so? He seems very nice to me and people in general like him and his course.
- deleted 10y ago[deleted]
- morenoh149 10y agoI'm seeing mention of https://ui-router.github.io/tutorial/react/helloworld https://ui-router.github.io/tutorial/react/helloworld and https://github.com/wesleytodd/nighthawk https://github.com/wesleytodd/nighthawk does anyone have experience with https://github.com/router5/router5/ https://github.com/router5/router5/ ?
- 6mirrors 10y agoAfter using react-router more than a year, I have to say it's a helpful lib, but the doc and the authors are not ready for serious business.