28

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?

Sam
  • 26,817
  • 58
  • 206
  • 383
  • 1- No, you don't need using the `````` if you are not using ```Redux```. 2- If you are using one application with different modules, you don't need define different entry points. As ```react-router``` will manages it for you. – salman.zare Mar 05 '18 at 22:37
  • 1
    To clarify my question, I AM using Redux in my app. My question is should it be `` or ``? – Sam Mar 05 '18 at 22:39
  • I'm using `````` in my projects. – salman.zare Mar 05 '18 at 22:48
  • 1
    Because, the ```router history``` is managed by ```Redux store``` and is passed down via ```ConnectedRouter```. We need to tell ```react-dom``` to render our application with the correct ```store``` and ```browser history``` data. We do this by using the ```ConnectedRouter``` export given to us by React Router v4. ```ConnectedRouter``` has access to the store given to ```Provider``` so you don’t need to worry about passing data through any additional props. – salman.zare Mar 05 '18 at 22:55
  • Keep in mind that if you need to use history / programmatic route changes from within your provider, that the provider needs to be nested inside the router. – jacobedawson May 03 '21 at 11:24

2 Answers2

30

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.

jokka
  • 1,832
  • 14
  • 12
3

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')
)
salman.zare
  • 649
  • 5
  • 8