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
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>;
}
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