Upgrade to React-Router 2.x

[mjrussell]

React-Router is in the process of releasing a 2.x version. They are still working the release candidates but wanted to start capturing ideas about the upgrade path. I need to spend more time looking at the new changes but wanted to start throwing some ideas down.

See https://github.com/rackt/react-router/blob/master/upgrade-guides/v2.0.0.md for the upgrade guide.

I think there is some question as to how the history piece will play well to ensure that we have the same history instance - maybe grab it from the context inside nested component, and import it from react-router in the middelware via import { browserHistory } from 'react-router'

I think the main work will be related to the new way to specify the the render prop of the Router component. It is now documented here.

We may be able to stick the redux-connected ReduxRotuerComponent in there instead, or consolidate some of the component logic with that new feature.

[mjrussell]

Also one "house-keeping" item would be if we want to bump our version up to 2.x along with react-router to prevent confusion when we do upgrade

[mjrussell]

Doing some prototyping on my branch here: https://github.com/mjrussell/redux-router/tree/react-router-2

Seems to be mostly working although there are some weird inconsistencies with server-side rendering which Im less familiar with. I got the tests passing but it seems the tests no longer listen to history.push and only responds to dispatch(push(...)). The example seems to run ok, but there are two initRoutes triggered

[Scarysize]

I take it you read the upgrade guide for react-router 2.0.0? Just making sure.

[mjrussell]

Yeah I did (linked one of them in the original issue). I realized the double init routes actually happens on master so that isn't new.

I kind of did the bare bones upgrade, not trying to modify much code and getting into work. I think there might be a much bigger refactor that removes some duplicate logic both redux-router and react-router now share though.

[seoyoochan]

@mjrussell Is there any workaround for this issue?

I got two errors,

Warning: [react-router] `useRoutes` is deprecated. Please use `createTransitionManager` instead. 

Uncaught TypeError: createHistory is not a function

I replaced createHistory with browserHistory by following the react-router v2

configureStore.js

import { createStore, applyMiddleware, compose } from 'redux';
import { reduxReactRouter } from 'redux-router';
import { browserHistory } from 'react-router';
import { createHistory } from 'history';
import DevTools from '../containers/DevTools';
import routes from '../routes';
import thunk from 'redux-thunk';
import createLogger from 'redux-logger';
import rootReducer from '../reducers/index';
// import initialState from './initialState';
import saveState from 'redux-save-state/localStorage';

const finalCreateStore = compose(
  applyMiddleware(thunk, saveState('appState')),
  reduxReactRouter({ routes, createHistory }),
  applyMiddleware(createLogger()),
  DevTools.instrument()
)(createStore)

export default function configureStore(initialState) {
  const store = finalCreateStore(rootReducer, initialState);
  return store;
}

[Scarysize]

@seoyoochan Do you use @mjrussell ´s branch or the current redux-router? We don´t support the usage of react-router v2 and currently (and for the foreseeable future) there is no development done to address this. I would recommend to switch to redux-simple-router as it is better maintained, though I currently don´t know if you can react-router v2 with it.

[mjrussell]

@seoyoochan I agree with @Scarysize that I'd recommend using redux-simple-router for react-router v2. Their most recent release (also 2.x) supports react-router v2. They adding support for the full location object and router action creators which was the main feature benefits of this project.

[seoyoochan]

@Scarysize @mjrussell Thanks for letting me know, i will use it :+1:

[HriBB]

I will give this a try ;)