chobo2 chobo2 - 3 months ago 16
React JSX Question

React Router + Redux?

I am watching this tutorial and I am wondering how do you use it with redux?

My render right now

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


router render example from tutorial

ReactDOM.render(
<Router history={hashHistory}>
<Route path="/" component={Layout}>
<IndexRoute component={Featured}></IndexRoute>
<Route path="archives(/:article)" name="archives" component={Archives}></Route>
<Route path="settings" name="settings" component={Settings}></Route>
</Route>
</Router>,
app);


I am not sure how Provider fits into the mix.

Answer

So Provider is just a wrapper component that wraps the rest of your application, so it should surround your root component no matter what that might be. In the example you described above, Router would be considered the root component in your application. i.e.

ReactDom.render(
  <Provider store={store}>
    <Router history={hashHistory}>
      <Route path="/" component={Layout}>
        <IndexRoute component={Featured}></IndexRoute>
        <Route path="archives(/:article)" name="archives" component={Archives}></Route>
        <Route path="settings" name="settings" component={Settings}></Route>
      </Route>
    </Router>
  </Provider>,
  document.getElementById('root')
);

Though, most people will break their routes into a seperate file, so it might look more like this..

routes.js

// imports

export default (
  <Route path="/" component={Layout}>
    <IndexRoute component={Featured}
    <Route path="archives(/:article)" name="archives" component={Archives} />
    <Route path="settings" name="settings" component={Settings}></Route>
  </Route>
)

index.js

// imports
import routes from './routes';

ReactDOM.render(
  <Provider store={store}>
    <Router history={hashHistory}>{routes}</Router>
  </Provider>,
  document.getElementById('root')
);

Hope this helps!

EDIT:

After further review, it looks like you don't have to wrap routes in the Routercomponent, you can simply do: <Router history={hashHistory} routes={routes} /> Just thought that was a nice enhancement!