次のようにルーターをセットアップしています。
<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>
私のコンポーネントは次のようになります。
<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>
これは、ボタンをクリックすると正しく機能します。ナビゲーションは適切に機能し、パスに従って適切なコンポーネントが読み込まれます。ただし、ブラウザーの戻る/進むボタンをクリックすると、ビューとパスは正しく変更されますが、アクティブなクラスとスタイルは同じままです。
アクティブなスタイルとクラス名をブラウザの履歴 (戻る/進むボタン) と連動させるにはどうすればよいですか?
反応ルーターのバージョンは 4.2.0 です