React 应用中 Provider 和 Router 的顺序

Question

我正在使我的 React 应用程序成为 SPA，并向其中添加 React Router 4 和 react-router-dom。目前，我的主页组件的入口点如下所示：

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

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

两个问题：

<BrowserRouter> 应该包裹 <Provider store={store}> 还是相反？这有关系吗？看起来 react-router-dom 没有使用 redux 存储，但我仍然认为 <Provider> 应该包装 <BrowserRouter> -- 请参见下面的代码。
我还将 "Home" 组件移除，因为路由器将根据 URL 决定加载哪个组件。

这是新代码：

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

我处理得对吗？

Answer 1

类似于：

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

Answer 2

没关系

他们互不依赖

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

Redux Provider, React Router.

他们大多只是声明几个 contextTypes，然后渲染子节点。

React 应用中 Provider 和 Router 的顺序

Order of Provider and Router in React app

reactjs

react-router

react-router-v4

react-router-dom

没关系