I'm making my React app a SPA and adding React Router 4 with react-router-dom to it. Currently, my entry point to my home component looks like this:

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

For another module, I had a different entry point and instead of the <Home /> component, I'd have a different one but the rest pretty much looked the same.

Two questions:

1. Does it matter if <BrowserRouter> should wrap the <Provider store={store}> or the other way around? Looks like react-router-dom doesn't use the redux store but I still think the <Provider> should wrap the <BrowserRouter> -- see the code below.
2. I'm also taking the "Home" component out because the router will decide what component to load depending on the URL.

Here's the new code:

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

Am I handling this right?

2 Answers

It does not matter.

They don’t depend on each other.

Take a look at their implementations, specifically at their render methods.

Redux Provider, React Router.

They mostly just declare couple of contextTypes, and render children.

Something like:

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