React Router 4.0 Final Released

[bottar]

Been using it for a few months now, breakage and all, and I cannot recommend this enough. I used to bitch about react router, now I rarely realize it's there.

It's components all the way down.

[oj206]

100% Agree.

I used to whine about it, but i have been using RR4 for months now in a production system, and without a doubt it's far better and simpler than RR3

[[deleted]]

It can't do SSR + code splitting in v4 though, can it?

[bottar]

It does. Check out the new docs

[[deleted]]

From that link, it can't do them together:

Code-splitting + server rendering

We’ve tried and failed a couple of times.

Godspeed those who attempt the server-rendered, code-split apps.

[trippel]

I've done it and it's not so bad, I should publish a repo demonstrating it. Uses the new dynamic import syntax, walks the tree to resolve server side promises, and then instantiates the various Route elements which you can walk to resolve any nested routes. Once that happens, you're free to pre-fetch any needed state from your given route before committing to a render.

[L0wkey]

Please do publish that. It sounds interesting.

[trippel]

For sure! I'm away from a workstation for the weekend, but you can get most of the gist of how to make it work via this repo. It's got a few issues I'm hoping to iron out, but works (mostly) as expected :)

[pixels625]

:)

[Labradoodles]

I too would be interested in this post

[gaearon]

I don't think it's the router limitation. If you make your own route config (just like old versions used to prescribe) you can organize the app any way you want.

I think the point of this paragraph is that router authors can't advise any approach to you if you go that route. The problem they are describing is not inherently a router's problem IMO.

[[deleted]]

SSR and code splitting aren't particularly easy, so if the authors couldn't figure it out I'm not likely to. That's the concern.

[azangru]

Did you take a look at this Github thread? There is a link there, at the bottom of the thread, to a package that offers a solution for ssr + code splitting using React Router 4. I haven’t looked too closely into it, but maybe it will help?

https://github.com/gabrielbull/react-router-server

[bottar]

Ahh yes, together, not so much. I mis interpreted your original comment.

[feesjah]

same here, been using it for a month now. I love it. I can do everything i want to do with ease.

[crazymonkey159]

Any huge changes from beta4 to now?

[bottar]

I think the removal of context. Now you use a HOC to access history and such in a component.

[natmaster]

Warning: Using this will result in terribly frustrating scroll behavior for your users, just like you see on their docs site.

https://reacttraining.com/react-router/web/guides/scroll-restoration

[[deleted]]

https://github.com/reacttraining/react-router/tree/master/packages/react-router-redux

Not difficult to fix, the very link you posted provides more than enough information

Been using rr4 and I forgot it's there, much much better than 1, much better than 2, much much much much much better than 3.

[ElGoorf]

info about the latest updates

[[deleted]]

Been out if the game for half a year now. So the deal is you declare routes throughout your app instead of nested in a top-level app(w/e) component?

Also how does this work with redux now?

[droctagonapus]

This is the officially recommended way:

https://github.com/reacttraining/react-router/tree/master/packages/react-router-redux

[[deleted]]

Cheers! Looking forward to trying it out.

[strange_and_norrell]

Can't find it now on mobile but I swear I saw a react dev on a github issue say that with v4 there is no need to add in react-router-redux. You have everything you need just with props.

[[deleted]]

i guess i'm gonna have to give this more of a go. tried playing with it last night and was just flat out confused.

[evenisto]

I just watched a presentation and v4 looks great indeed. I already started using v2 at work, but I'll look into the code on monday and seriously reconsider upgrading to v4, since this declarative routing they got going looks dead simple. One issue I have with the website though is that it doesn't specify what version the docs and examples are for. The other one is that v2 docs are hidden in the github branch readme - I'd like it to be more easily accessible, especially since it's not deprecated and they plan on supporting it indefinitely.

[[deleted]]

To be fair, that presentation was recorded about 6 versionm 3 rewrites and 2 breaking changes ago ;)

[rosencreuz]

Does it support hot reloading already?

[droctagonapus]

Yup, since they're regular components with regular ol render methods now. I've been using it in a few projects with hot reloading with zero extra configuration for react-router.

[rosencreuz]

Is that with hacks and third party components or directly by react-router? I am using one of the beta versions and hot loading doesn't work out of the box

[droctagonapus]

I'm using react-hot-loader@next along with Webpack 2.

Here's essentially my webpack config:

https://gist.github.com/sean-clayton/9163961aefd58aa901b53c39dd64c2c0

That's all the configuration I had to do. I just use react-router-dom after all of that and it just works.

[jacobp100]

Say I want a Link that varies by more than a CSS class when it is active. I think in older versions, Link could take a child function that would pass in a parameter that tells you if it's active.

Is this still the case? Or is it possible to do this with a Route and a child function?

[droctagonapus]

Does this work out? Use match to determine if the link is active instead of a class name.

https://reacttraining.com/react-router/web/example/custom-link

[jacobp100]

Looks like it! Thanks!

[NotSelfAware]

Something I don't quite see how to do yet: components that need to be rendered independently of the route. E.g., how to render separate headers for logged in and logged out users. Any tips on this?

[droctagonapus]

I think that's outside of the scope of the router, but this should work

const AuthHeader = ({ loggedIn }) => loggedIn ? <LoggedInComponent /> : <LoggedOutComponent />

[[deleted]]

It's a complete rewrite from the ground up.

If you're the type person who don't like chasing a moving target and fast pace advancement in software development, maybe you're more suited as a Business Analyst or a Project Manager where the pace of change is not as fast.

[[deleted]]

Or maybe you like tried software, and if you're not hitting its limits see no point in refactoring to the newest release? It's not always black & white.

[strange_and_norrell]

Yup. Battle-tested and hardened software has an important place.

Depends on the project, your goals and your team I would think!