web-dev-qa-db-ja.com

React appでのプロバイダーとルーターの順序

ReactアプリをSPAにし、React Router 4とreact-router-domを追加しています。現在、ホームコンポーネントへのエントリポイントは次のようになっています。

render (
    <Provider store={store}>
        <App>
            <Home />
        </App>
    </Provider>,
    document.getElementById('app')
);

別のモジュールでは、別のエントリポイントがあり、<Home />コンポーネントの代わりに別のエントリポイントがありますが、残りはほとんど同じように見えました。

2つの質問：

  1. <BrowserRouter>が<Provider store={store}>をラップする必要があるか、またはその逆であるかは重要ですか？ react-router-domはreduxストアを使用していないようですが、それでも<Provider>は<BrowserRouter>をラップする必要があると思います-以下のコードを参照してください。
  2. ルーターがURLに応じてロードするコンポーネントを決定するため、「ホーム」コンポーネントも削除しています。

新しいコードは次のとおりです。

render (
    <Provider store={store}>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </Provider>,
    document.getElementById('app')
);

私はこれを正しく処理していますか？

reactjsreact-routerreact-router-v4react-router-dom
6
Sam

それは問題ではありません。

彼らはお互いに依存していません。

それらの実装、特にそれらのレンダリングメソッドを見てください。

ReduxプロバイダーReactルーター

ほとんどの場合、contextTypesのカップルを宣言し、子をレンダリングします。

3
jokka

何かのようなもの：

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { ConnectedRouter } from 'react-router-redux'
import store, { history } from './store'
import App from './app'

render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <div>
        <App />
      </div>
    </ConnectedRouter>
  </Provider>,
  document.querySelector('#root')
)
1
salman.zare