React-redux-firebase: feat(react-router): react-router version 4 support

[prescottprue]

If using react-router v4.*.*, routing patterns provided in the docs do not work.

• #115 may be related
• Issue on redux-auth-wrapper

This issue will be used to track progress on fully documenting usage of react-router version 4.

[JulianJorgensen]

Nice! Looking forward. Great work creating this whole library @prescottprue! Much appreciated.

[Ethan-Arrowood]

@prescottprue if my app is already dependent on React Router v.4 should I avoid using react-redux-firebase?

[JulianJorgensen]

@Ethan-Arrowood I just upgraded to react-router v4 and it seems to be fine. I haven't tested all issues as I'm still trying to fix some react-redux-firebase v2 bugs.

[prescottprue]

@Ethan-Arrowood If you are not having any issues with how things work currently, then you are fine to use it. The issues are mainly around specific routing recipes with redux-auth-wrapper v1.

As @JulianJorgensen mentioned, it actually works fine in most cases.

[prescottprue]

@JulianJorgensen did you get everything working as expected? @Ethan-Arrowood as I understand, the only real issues are with the routing-recipes in the docs, specifically the stuff with redux-auth-wrapper.

Been trying to get time to work on an example, but stuff with v2.0.0 has been taking up my time.

[pzmudzinski]

This is my solution for v2 and RR v4:
```import { connectedRouterRedirect } from 'redux-auth-wrapper/history4/redirect';
import locationHelperBuilder from 'redux-auth-wrapper/history4/locationHelper';
import { browserHistory } from 'react-router';
import LoadingScreen from '../components/LoadingScreen'; // change it to your custom component

const locationHelper = locationHelperBuilder({});

export const UserIsAuthenticated = connectedRouterRedirect({
redirectPath: (state, ownProps) => locationHelper.getRedirectQueryParam(ownProps) || '/login',
allowRedirectBack: true,
authenticatedSelector: ({ firebase: { auth } }) =>
auth && auth.isLoaded && !auth.isEmpty,
authenticatingSelector: ({ firebase: { auth } }) =>
auth === undefined || !auth.isLoaded,
AuthenticatingComponent: LoadingScreen,
wrapperDisplayName: 'UserIsAuthenticated',
});

export const UserIsNotAuthenticated = connectedRouterRedirect({
allowRedirectBack: false,
redirectPath: (state, ownProps) => locationHelper.getRedirectQueryParam(ownProps) || '/dashboard',
authenticatedSelector: ({ firebase: { auth } }) => auth != null && auth.isLoaded && auth.isEmpty,
authenticatingSelector: ({ firebase: { auth } }) =>
auth === undefined || !auth.isLoaded,
AuthenticatingComponent: LoadingScreen,
wrapperDisplayName: 'UserIsNotAuthenticated',
});
```

[prescottprue]

Thanks @pzmudzinski. I will update the docs with this example. After I can confirm it working I will close the issue.

[prescottprue]

Confirmed and placed in docs. Thanks again @pzmudzinski.