React应用程序中提供程序和路由器的顺序

Question

我正在将我的React应用程序设为SPA并将React Router 4与react-router-dom添加到其中。目前，我的家庭组件的入口点如下所示：

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

对于另一个模块，我有一个不同的入口点，而不是<Home />组件，我有一个不同的，但其余几乎看起来相同。

两个问题：

1. 如果<BrowserRouter>应该包裹<Provider store={store}>或其他方式是否重要？看起来像react-router-dom不使用redux商店，但我仍然认为<Provider>应该包装<BrowserRouter> - 请参阅下面的代码。
2. 我也将“Home”组件取出，因为路由器将根据URL决定加载哪个组件。

这是新代码：

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

我处理这个问题吗？

Answer 1

It does not matter.

他们不依赖于彼此。

看看他们的实现，特别是他们的渲染方法。

Redux Provider, React Router.

他们大多只是宣布几个contextTypes，并渲染孩子。

Answer 2

就像是：

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')
)