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:
<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.Here's the new code:
render (
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>,
document.getElementById('app')
);
Am I handling this right?
They don’t depend on each other.
Take a look at their implementations, specifically at their render methods.
They mostly just declare couple of contextTypes
, and render children.