【问题标题】：Order of Provider and Router in React appReact 应用程序中提供者和路由器的顺序
【发布时间】：2018-08-13 16:56:21
【问题描述】：

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

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

我处理对了吗？

【问题讨论】：

1- 不，如果您不使用Redux，则不需要使用<Provider store={store}>。 2- 如果您使用具有不同模块的一个应用程序，则不需要定义不同的入口点。 react-router 将为您管理它。
为了澄清我的问题，我在我的应用程序中使用 Redux。我的问题是应该是<Provider><BrowserRouter><App /> 还是<BrowserRouter><Provider><App />？
我在我的项目中使用<Provider><BrowserRouter><App />。
因为router history 由Redux store 管理，并通过ConnectedRouter 向下传递。我们需要告诉react-dom 使用正确的store 和browser history 数据来渲染我们的应用程序。我们通过使用 React Router v4 提供给我们的 ConnectedRouter 导出来做到这一点。 ConnectedRouter 可以访问分配给Provider 的商店，因此您无需担心通过任何其他道具传递数据。
请记住，如果您需要在提供程序中使用历史记录/程序化路由更改，则提供程序需要嵌套在路由器中。

标签： reactjs react-router react-router-v4 react-router-dom

【解决方案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')
)

【讨论】：

完全正确，嵌套多个路由需要使用react-router-redux。

【解决方案2】：

没关系。

它们不相互依赖。

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

Redux Provider,React Router.

他们大多只是声明一对contextTypes，然后渲染孩子。

【讨论】：

谢谢，@jokka！ :)