web-dev-qa-db-ja.com

Reactルーター4はリンクのビューを更新しませんが、更新時に更新します

私は次のシンプルなナビゲーションコードを使用しています

<Router>
  <Switch>
    <Route exact path='/dashboard' component={Dashboard} />
    <Route path='/dashboard/accounts' component={AccountPage} />
  </Switch>
</Router>

<NavLink exact to={'/dashboard'}
         disabled={this.props.item.disabled}
         activeClassName='active'>

<NavLink exact to={'/dashboard/accounts'}
         disabled={this.props.item.disabled}
         activeClassName='active'>

URLは変更されますが、ビューは変更されません。ただし、ページを更新するか、そのURLに手動で移動すると変更されます。

reactjsurlreact-routerreact-router-v4
40
ilyo

以下も使用できます。

import { withRouter } from 'react-router-dom';

そして、エクスポートのデフォルトでは、次のようにします：

export default withRouter(connect(mapStateToProps, {})(Layout));

エクスポート接続がある場合、そのコンポーネントがルーターを使用することを通知する必要があるためです。

48
daminufe

これは、react-reduxconnectメソッドがshouldComponentUpdateを実装しているため、小道具が変更されなかったときにコンポーネントnotがレンダリングされるためです。そしてこれは今、react-router 4と競合しています。

これを回避するには、 react-reduxトラブルシューティングセクション で説明されているように、{pure: false}をconnectに渡すことができます。

別の方法は、withRouter HOCを使用するか、 DOCSで説明 のようにlocation propを渡すことです。

28
Tomasz Mularczyk

Navlinkをステートレスコンポーネント（またはダムコンポーネント）とコンテナに配置して、navbarの折りたたみ状態を制御しました。

navbar-containerをPureComponentからComponentに切り替えた後、問題は解決しました。

5
Tom Schinelli

この問題が発生しました。コンポーネントスイッチに属性キーを追加して解決します。値はロケーションパス名およびロケーション検索です。

0
TDQ