React-router: migrate to the react-router v4

[palaniichukdmytro]

Version

4.0.0

Steps to reproduce

I try to migrate to the react-router v4, where should I start. The most path I need to authenticate and need to redicert. What Should I use else . I installed. I installed last npm i --save react-router-dom@next and npm i --save react-router@next

application.js

import {browserHistory} from 'react-router'
import Routes from './routes'

export class Application extends Component {
    static propTypes = {
        locale: React.PropTypes.string.isRequired,
        messages: React.PropTypes.objectOf(React.PropTypes.string.isRequired).isRequired,
        login: React.PropTypes.func.isRequired,
        redirectToLoginPage: React.PropTypes.func.isRequired,
        isLoggedIn: React.PropTypes.bool.isRequired,
    };

    constructor() {
        super()
    }

    componentDidUpdate = prevProps => {
        if (!prevProps.isLoggedIn && this.props.isLoggedIn)
            browserHistory.push('/')
    }

    authenticate = (nextState, transition, callback) => {
        if (!this.props.isLoggedIn)
            this.props.redirectToLoginPage()
        else
            callback()
    };

    processLoginCallback = (nextState, transition, callback) => {
        if (!this.props.isLoggedIn)
            this.props.login()

        callback()
    };

    render = () =>
        <IntlProvider locale={this.props.locale} messages={this.props.messages}>
            <MuiThemeProvider muiTheme={getMuiTheme(theme)}>
                <Routes authenticate={this.authenticate} processLoginCallback={this.processLoginCallback} />
            </MuiThemeProvider>
        </IntlProvider>;
}

routes.js:

import {
  BrowserRouter as Router,
  Route,
  Link,
  Redirect,
  withRouter
} from 'react-router-dom'

const Routes = ({authenticate, processLoginCallback}) =>
        <Router history={browserHistory}>
            <Route path='/' component={Root} onEnter={authenticate}>
                <IndexRoute component={Home}/>

                <Route path='home' component={Home} />
                <Route path='devices' component={Devices} />
                <Route path='users' component={Users} />
                <Route path='users/add' component={AddOrEditUser}/>
                <Route path='users/edit/:personId' component={AddOrEditUser}/>
                <Route path='patients' component={Patients}>
                    <Route path='add' component={AddOrEditPatient} />
                    <Route path='edit/:personId' component={AddOrEditPatient} />
                </Route>
                <Route path='plans' component={Plans} />
                <Route path='commissioning' component={Commissioning} />
                <Route path='server-settings' component={ServerSettings} />
                <Route path='about' component={About} />
            </Route>

            <Route path='/login-callback' onEnter={processLoginCallback} />
        </Router>

    Routes.propTypes = {
        authenticate: React.PropTypes.func.isRequired,
        processLoginCallback: React.PropTypes.func.isRequired,
    }

    export default Routes

Expected Behavior

Actual Behavior

[timdorr]

This is a bug tracker, not a support system. For usage questions, please use Stack Overflow or Reactiflux. Thanks!