没关系。

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

没关系。

他们不相互依赖。

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

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

React app

2 个答案:

没关系。