I have a router set up like this:
<Provider>
<Router history={browserHistory}>
<BFMRoot>
<ConnectedSwitch>
<Route path='/' exact component={BodyWelcome} />
<Route path='/login' component={Bodies.BodyLogin} />
<Route path='/register' component={Bodies.BodyRegister}>
</ConnectedSwitch>
</BFMRoot>
</Router>
</Provider>
My components look like:
<NavLink to={this.prepareRouteUrl(this.props.itemName)} activeStyle={{ backgroundColor: 'blue' }} activeClassName='active'>
<IconLabelButton
onPress={this.props.onSelect}
labelText={this.props.itemName}
fontName="FontAwesome"
iconLeftName={this.props.itemIcon}
hab='inline'
fluid />
</NavLink>
This works properly when the buttons are clicked. The navigation works properly, with the right components loading according to the path. However, when I click on the browser back/forward button, the views and path change correctly, but the active class and styles remain then same.
How can I make the active styles and class names work with the browser history (back/forward buttons)?
The react-router version is 4.2.0
