2

次のようにルーターをセットアップしています。

<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 です

4

0 に答える 0