React-router: Problem when upgrade react-router 3.0 to 4.0 ?

Created on 29 Mar 2017 · 4Comments · Source: ReactTraining/react-router

My project is same : https://github.com/pauldotknopf/react-aspnet-boilerplate

How can i upgrade react-router 3.0 to 4.0
MY CONFIG IS :

//////////////////////////////////////////////////////////////////////////////////
FILE server.js :

import React from 'react';
import ReactDOM from 'react-dom/server';
import { match } from 'react-router';
import { Provider } from 'react-redux';
import createHistory from 'react-router/lib/createMemoryHistory';
import RouterContext from 'react-router/lib/RouterContext';
import Html from './helpers/Html';
import getRoutes from './routes';
import configureStore from './redux/configureStore';
export function renderView(callback, path, model, viewBag) {
const history = createHistory(path);
const store = configureStore(model, history);
const result = { html: null, status: 404, redirect: null };
match(
{ history, routes: getRoutes(store), location: path },
(error, redirectLocation, renderProps) => {
if (redirectLocation) {
result.redirect = redirectLocation.pathname + redirectLocation.search;
} else if (error) {
result.status = 500;
} else if (renderProps) {
const isNotFound = renderProps.routes.filter(route => route.status === 404).length > 0;
result.status = isNotFound ? 404 : 200;
const component =
(

);
result.html = ReactDOM.renderToString();
} else {
result.status = 404;
}
});
callback(null, result);
}
export function renderPartialView(callback) {
callback('TODO', null);
}

import createHistory from 'react-router/lib/createMemoryHistory';
import RouterContext from 'react-router/lib/RouterContext';
i change to :
import createHistory from 'history/createMemoryHistory';
import RouterContext from 'react-router/lib/RouterContext'; // i can't find RouterContext in new ver4

//////////////////////////////////////////////////////////////////////////////////
FILE client.js :

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, browserHistory } from 'react-router';
import { Provider } from 'react-redux';
import { syncHistoryWithStore } from 'react-router-redux';
import getRoutes from './routes';
import configureStore from './redux/configureStore';
const store = configureStore(window.__data, browserHistory);
const history = syncHistoryWithStore(browserHistory, store);
ReactDOM.render(
{getRoutes(store)}
);

import { Router, browserHistory } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux';
i change to :
import { BrowserRouter } from 'react-router';
I no see history in BrowserRouter ?

'ReactDOM.render(
{getRoutes(store)}
);

//////////////////////////////////////////////////////////////////////////////////
FILE routes.js :

import React from 'react';
import { IndexRoute, Route } from 'react-router';
import { App, Home, NotFound, About, Contact } from './containers';
export default () => {
return (
{ /* Home main / }

{ / Routes / }

{ / Catch all route */ }

);
};

i change to :

import React from 'react';
import { Route } from 'react-router';
import { App, Home, NotFound, About, Contact } from './containers';
export default () => {
return (

);
};

//////////////////////////////////////////////////////////////////////////////////
FILE redux/configureStore.js :

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import { routerMiddleware } from 'react-router-redux';
import reducer from './reducer';
let devTools = f => f;
if (typeof window === 'object'
&& typeof window.devToolsExtension !== 'undefined') {
devTools = window.devToolsExtension();
}
export default function configureStore(initialState, history) {
const enhancer = compose(
applyMiddleware(thunk),
applyMiddleware(routerMiddleware(history)),
devTools
)(createStore);
return enhancer(reducer, initialState);
}

//////////////////////////////////////////////////////////////////////////////////
FILE helpers/Html.js :

import React, { Component } from 'react';
import ReactDOM from 'react-dom/server';
import serialize from 'serialize-javascript';
export default class Html extends Component {
render() {
const { component, store } = this.props;
const content = component ? ReactDOM.renderToString(component) : '';
return (

rel="stylesheet" type="text/css" charSet="UTF-8" />

dangerouslySetInnerHTML={{ __html: window.__data=${serialize(store.getState())}; }}
charSet="UTF-8" />

);
}
}

//////////////////////////////////////////////////////////////////////////////////
FILE containers/App/App.js

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { IndexLink } from 'react-router';
class App extends Component {
static propTypes = {
children: PropTypes.object.isRequired
};
render() {
return (
Home about contact {this.props.children}
);
}
}
export default connect()(App);

i change to :

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router';
class App extends Component {
static propTypes = {
children: PropTypes.object.isRequired
};
render() {
return (
Home about contact {this.props.children}
);
}
}
export default connect()(App);

//////////////////////////////////////////////////////////////////////////////////
FILE containers/Home/Home.js :

import React, { Component } from 'react';
export default class Home extends Component {
render() {
return ( }
}

/*******/
Sorry if my question is silly, my english is not good
I read documents on internet but i dont understand (I learned reactjs for 2 months)
How can i upgrade this project : https://github.com/pauldotknopf/react-aspnet-boilerplate
I upgraded all package with highest version, only react-router i can't do

Very grateful !

Source