web-dev-qa-db-ja.com

React router 4 history.listenが起動しない

ルーターv4と履歴v4.5.1に切り替え、履歴リスナーが機能しない

import createBrowserHistory from 'history/createBrowserHistory'
const history = createBrowserHistory()

history.listen((location, action) => {
  console.log(action, location.pathname, location.state)  //  <=== Never happens
})

render(
  <Provider store={store}>
    <Router history={history}>
      ...
    </Router>
  </Provider>,
  document.getElementById('root')
)

それが無視されている理由はありますか？

reactjsreduxreact-routerbrowser-historyreact-router-v4
16
ilyo

BrowserRouterを使用しているため（質問のコメントで言及されているように、インポートエイリアスルーターを使用）、渡した履歴プロップは関係ありません。代わりに 内部で新しいブラウザーを作成して割り当てますルーターへの履歴 。したがって、あなたが聞いてルーターで使用されている履歴インスタンスは同じではありません。そのため、リスナーは機能しません。

元のルーターをインポートします。

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

期待どおりに動作します。

8
Tharaka Wijebandara

問題は、独自の履歴オブジェクトを作成してルーターに渡すことです。ただし、React Router v4はすでにthis.propsを介してこのオブジェクトを提供しています。 （ルーターのインポートはこれとは関係ありません）

componentDidMount() {
    this.props.history.listen((location, action) => console.log('History changed!', location, action));
}

ただし、以下のようにアプリをもう少し階層化して、このcomponentDidMountメソッドをMyApp.jsxに配置し、直接最上位レベルに配置する必要はありません。

<Provider store={store}>
    <BrowserRouter>
        <MyApp/>
    </BrowserRouter>
</Provider>

（React Nativeを実行している場合は、BrowserRouterではなくNativeRouterを使用してください）

2
Micros