react-router: Error: The root route must render a single element

when I use the “auth-with-shared-root"of example to build my project. This is my code of app.js

import React from 'react'
import { render } from 'react-dom'
import { browserHistory, Router } from 'react-router'
import routes from './config/routes'

render(<Router history={browserHistory} routes={routes}></Router>, document.getElementById('example'));

This is my code of index.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>react-router</title>
<meta charset="utf-8">
<link rel="alternate" href="app.css">
<link rel="stylesheet" href="global.css" />
</head>
<body>

<div id="example"></div>

<script src="/build/js/bundle.js"></script>
</body>
</html>

I open chrome and It report Error Uncaught Invariant Violation: The root route must render a single element

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 16 (3 by maintainers)

Most upvoted comments

So more specifically for the novices like me using this example with babel 6+ convert all: require('') statements in routes.js to require('').default

To be very clear: cb(null, require('../components/Landing')) -> cb(null, require('../components/Landing').default)

+32

rosskevin on May 13, 2016

Bable 5.x is deprecated. The example code should be updated to using Babel 6.x.

hexicle on Apr 4, 2016

@Bboom1024 @jaydenseric Not sure if you’ve figured it out already, but I got around it by importing the components and using those in the callbacks.

import App from '../components/App';
import Logout from '../components/Logout';

export default {
  component: App,
  childRoutes: [
    { path: '/logout',
      getComponent: (location, cb) => {
        require.ensure([], (require) => {
          cb(null, Logout)
        })
      }
    },
...

oliviabanis on Feb 5, 2016

Just wanted to chime in and say that I just had this issue and realized that I forgot to export.

If you’re experiencing this, be sure to check all of your components and make sure they are exported.

colshacol on Oct 5, 2016

@Bboom1024 I have this issue too. What resolved it in the end?

jaydenseric on Jan 14, 2016

use
module.exports = Index instead of export default Index solve this

maybe don’t support es6 in router

zxydaisy on Sep 29, 2016

it’s probably require('...').default, don’t need require.ensure to update for babel 6.

ryanflorence on Apr 4, 2016

In router.js I changed the require paths:

from const Header = require('./HeaderComponent.jsx'); to: const Header = require('./HeaderComponent.jsx').default;

gretak on Jan 26, 2017

const routes = {
    childRoutes: [{
    	path: '/',
    	component: require('../containers/App'),
    	indexRoute : {
    		getComponent(nextState, cb) {
    		  require.ensure([], (require) => {
    		    cb(null, require('../components/Home'))
    		  }, 'Home')
    		}
    	},
    	childRoutes: [
	        require('../routes/All'),
	        require('../routes/Archives'),
	        require('../routes/Articles'),
	        require('../routes/Tags')
    	]
    }]

}
export default routes

then the browser tell me The root route must render a single element, i want to know how to orgnize the strucure

hitao123 on Jan 12, 2017

@olgabanis It’s the difference between babel 5.x and 6.x. I can pack the project with babel 5.x without any modification. But for babel ^6.5, you have to import all components at the start of the file.

Thank you for sharing the solution. It works anyway 😃

uynap on Feb 19, 2016

There’s no difference with respect to the code. And require.ensure is a webpack feature anyway.

taion on Apr 4, 2016