Implemented react router v4 to ReactSPA template - #817

@Kevenvz,
Thanks for your contribution.
To ensure that the project team has proper rights to use your work, please complete the Contribution License Agreement at https://cla2.dotnetfoundation.org.

It will cover your contributions to all .NET Foundation-managed open source projects.
Thanks,
.NET Foundation Pull Request Bot

@Kevenvz, thanks for signing the contribution license agreement. We will now validate the agreement and then the pull request.

Thanks, .NET Foundation Pull Request Bot

Will update ReactReduxSpa when react-router-redux is stable

How will this work in ReactReduxSpa without a static routes definition (which I'm assuming goes away with RRv4)? /cc @SteveSanderson

We can use the provided <StaticRouter> by RRv4, you can get more information for SSR in RRv4 here: https://reacttraining.com/react-router/web/guides/server-rendering

Thanks very much for this. It looks very clean and well organised.

I'll hold off on merging this until we can do the same for ReactReduxSpa, as it's valuable to keep things relatively consistent (and in any case, from general discussions here, it seems a lot more people are using ReactReduxSpa than ReactSpa, so that's the one we really focus on).

I understand you're waiting for react-router-redux to become stable. Out of interest, are you just waiting for them to publish a package with a non-prerelease version number, or are you waiting for specific bugs to be fixed?

Thanks for the appreciation!

As far as I know there is a next branch in react-router-redux so it's possible to implemented it. I don't know if you guys want to use an unstable version since I don't see any packages being used that are unstable.

Quote from the react-router-redux readme:

This is beta software, it needs:

1. A working example
2. Some people to try it out and find bugs
3. A strategy for working with the devtools
   • (issue describing a different approach to what we've seen previously coming soon)

I don't know if you guys want to use an unstable version since I don't see any packages being used that are unstable.

We try to avoid it, because in practice it tends to cause problems for people using these templates when upstream packages have frequent breaking changes. But it can be difficult to judge, because different 3rd-party packages have different standards when it comes to back-compatibility, and semver is subjective.

If you think react-router-redux is getting close to a stable release, it would definitely be valuable to see a PR that migrates us to the new version. We might or might not ship the templates with a dependency on the prerelease package, depending on how final it looks. It's hard to say, and I'd be interested in your opinion on the level of stability!

from my experience with it so far the api has been pretty jumpy between alpha versions, we were on alpha 2, then alpha 3 broke it, now it's on alpha 4? They're making good progress anyway. 👍

Thanks for sharing your experience @KraigWalker ! They are currently on alpha 4 yes.

I also noticed the @types/react-router-redux isn't updated to the alpha version so it'll give an error saying there is no exported member <ConnectedRouter>.

I think we should wait untill they atleast go into a RC state so that we know the API is consistent.

react-router-redux just got published on npm (still alpha, but published)

Seems that they are pretty confident enough to publish it. Should I start working on updating the template?

@Kevenvz Yes, that would be great - thanks! Since it's a prerelease package, we should probably pin our dependency on it to an exact version rather than just react-router-redux@next since there's a high chance of breaking changes.

I successfully implemented react-router v4 SSR in another project (which uses this boilerplate). I'm currently driving home so expect an updated PR soon.

Done!

Any update ?

This is now merged into dev. Thanks again, @Kevenvz!

Since react-router-redux is still in prerelease, I've set the dependency to an exact version rather than a range.

Sure, thanks for allowing me to contribute!