Skip to content
This repository has been archived by the owner. It is now read-only.
Branch: master
Go to file

Latest commit


Failed to load latest commit information.
Latest commit message
Commit time


This example application has been archived because it is very out of date. See for a more complete and modern implementation using recent versions of Create React App and React Router as well as ArcGIS REST JS.

Example of how to use esri-loader-react and esri-loader to load the ArcGIS API for JavaScript in a react-router application.

View it live

How it works

The ArcGIS API is not needed until the user navigates to the /map route, but we can preload the script without blocking rendering by including esri-loader-react's <EsriLoaderContainer /> component.

Once on the map route, the <Map> component loads the esri/arcgis/util module using esri-loader's dojoRequire() and then renders a map:

// modules/Map.js
componentDidMount () {
  // get item id from route params or use default
  const itemId = this.props.params.itemId || '8e42e164d4174da09f61fe0d3f206641'
  // require the map class
  dojoRequire(['esri/arcgis/utils'], (arcgisUtils) => {
    // create a map at a DOM node in this component
    .then((response) => {
      // hide the loading indicator
      // and show the map title
      // NOTE: this will trigger a rerender
        mapLoaded: true,
        item: response.itemInfo.item
    }, (err) => {
        mapLoaded: true,
        error: err.message || err


See the esri-loader documentation for an explanation of why you would use these techniques.

Development instructions

First you'll need Node.js and the package manager that comes with it: npm.

git clone
cd esri-react-router-example
npm install
npm start

Now open up http://localhost:8080

You can’t perform that action at this time.