Order of Provider and Router in React app

Question

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?

Answer 1

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.