# React Router & Webpack in Production

DevFeed: [React Router & Webpack in Production](<https://devfeed.tech/articles/react-router-webpack-in-production-21870.md>)

Original publisher: [Read original article](<https://reactjsnews.com/webpack-in-production>)

Author: Zach Silveira

Published: 2016-03-13T04:00:09Z

Content type: article

Language: en

Sources: [ReactJS News](<https://devfeed.tech/sources/reactjs-news.md>)

Topics: [React Router](<https://devfeed.tech/topics/react-router.md>), [Webpack](<https://devfeed.tech/topics/webpack.md>), [Development](<https://devfeed.tech/topics/development.md>), [Code](<https://devfeed.tech/topics/code.md>), [API](<https://devfeed.tech/topics/api.md>)

Tags: [api](<https://devfeed.tech/tags/api.md>), [code-splitting](<https://devfeed.tech/tags/code-splitting.md>), [polyfill](<https://devfeed.tech/tags/polyfill.md>), [react](<https://devfeed.tech/tags/react.md>), [react-router](<https://devfeed.tech/tags/react-router.md>), [webpack](<https://devfeed.tech/tags/webpack.md>)

## AI overview

A practical account of using React Router and Webpack in production for a large application with many routes and code splits. It explains the client-side setup, route organization, asynchronous data loading, server rendering, and differences between server and client builds.

## Source excerpt

I've been working on a pretty large react-router codebase at work. Currently it has around 50~ code splits, which as you can imagine, is a lot of routes. This is going to be a post on the things I've learned throughout building out my development / production config and how we are using webpack in production. ###Initial Setup Before I really dive into how my webpack config is setup and the problems I've found, I'll quickly go over how this app is setup. Currently, there's one entry point and it looks like this: import React from 'react' import { render } from 'react-dom' import { match, Router, browserHistory } from 'react-router' import AsyncProps from 'async-props' import routes from '../routes/index' /* globals document, window */ const { pathname, search, hash } = window.location const location = `${pathname}${search}${hash}` match({ routes, location }, () => { render( <Router render={props => <AsyncProps {...props}/>} routes={routes} history={browserHistory} />, document.getElementById('app') ) }) It looks like a standard react-router setup, except a couple things are different. For one, there's way too many routes to have them all in this file, so we are importing the main route object into this file. Second, we are using match on the client side. Without matching first, the client side would try to render before the splits were downloaded causing an error. You can read a little more about match on the client here. Next, we are using Ryan Florence's awesome async-props library for loading data into components. It allows me to load data from an api before the server renders components. It will pass the data down to the client for the client-side render, and then data will load as you navigate to new pages automatically. ###Routes Our main routes file looks like this: export default { component: 'div', path: '/', indexRoute: require('./index'), childRoutes: [ require('./login'), require('./account'), ... ] } There's a lot more require's in our app of course. And