75

I keep on getting the error:

A 'Router' may have only one child element

when using react-router.

I can't seem to figure out why this is not working, since it's exactly like the code they show in their example: Quick Start

Here is my code:

import React from 'react';
import Editorstore from './Editorstore';
import App from './components/editor/App';
import BaseLayer from './components/baselayer';
import {BrowserRouter as Router, Route} from 'react-router-dom';
import {render} from 'react-dom';

const root = document.createElement('div');
root.id = 'app';
document.body.appendChild(root);

const store = new Editorstore();
const stylelist = ['https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css', 'https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css', 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css', 'https://api.tiles.mapbox.com/mapbox-gl-js/v0.33.1/mapbox-gl.css'];

stylelist.map((link) => {
    const a = document.createElement('link');
    a.rel = 'stylesheet';
    a.href = link;
    document.body.appendChild(a);
    return null;
});

render((
  <Router>
    <Route exact  path="/" component={BaseLayer} />
    <Route path="/editor" component={App} store={store} />
  </Router>
), document.querySelector('#app'));
1
  • Things (Link, Route) inside BrowserRouter need to be wrapped inside a div
    – onmyway133
    Aug 10, 2018 at 10:18

10 Answers 10

151

You have to wrap your Route's in a <div>(or a <Switch>).

render((
  <Router>
    <Route exact  path="/" component={BaseLayer} />
    <Route path="/editor" component={App} store={store} />
  </Router>
), document.querySelector('#app'));

should be

render((
  <Router>
    <div>
       <Route exact  path="/" component={BaseLayer} />
       <Route path="/editor" component={App} store={store} />
    </div>
  </Router>
), document.querySelector('#app'));

jsfiddle / webpackbin

6
  • 27
    Strange. Why is this?
    – Cameron
    Apr 24, 2017 at 6:57
  • 2
    Router expects this.props.children to be null or to have length equal to 1
    – QoP
    Apr 28, 2017 at 23:46
  • 1
    This isn't working, it just displays both routes in the same place.
    – NSCoder
    May 26, 2017 at 12:45
  • 4
    It displays both routes because it is using div, you really should use switch instead. This makes the route exclusive github.com/ReactTraining/react-router/blob/master/packages/…
    – Don Djoe
    May 30, 2017 at 13:09
  • There is a component to do this wrapper: Switch Jul 18, 2017 at 18:30
40

This is an API change in react-router 4.x. Recommended approach is to wrap Routes in a Switch: https://github.com/ReactTraining/react-router/issues/4131#issuecomment-274171357

Quoting:

Convert

<Router>
  <Route ...>
  <Route ...>
</Router>

to

<Router>
  <Switch>
    <Route ...>
    <Route ...>
  </Switch>
</Router>

You will, of course, need to add Switch to your imports:

import { Switch, Router, Route } from 'react-router'
3
  • 1
    I'm getting Uncaught ReferenceError: Switch is not defined Error when I'm using Switch
    – NSCoder
    May 26, 2017 at 12:43
  • 4
    @NSCoder make sure you're using a 4.x.x version of react-router, and require or import Switch at the top of your module
    – FeifanZ
    May 27, 2017 at 17:11
  • 1
    if i use switch in V-4 it say Warning: Failed prop type: The prop history` is marked as required in Router, but its value is undefined.`
    – MD Ashik
    Jul 26, 2017 at 20:27
3

I Always use Fragment in react web and native ( >= react 16 )

import React, { Component, Fragment } from 'react'
import { NativeRouter as Routes, Route, Link } from 'react-router-native'
import Navigation from './components/navigation'    
import HomeScreen from './screens/home'
import { RecipesScreen } from './screens/recipe'

class Main extends Component {
  render() {
    return (
      <Fragment>
        <Navigation />
        <Routes>
          <Fragment>
            <Route exact path="/" component={HomeScreen} />
            <Route path="/recipes" component={RecipesScreen} />
          </Fragment>
        </Routes>
      </Fragment>
    )
  }
}

export default Main
2

I put all my <Route /> tags inside the <Switch> </Switch> tag like this.

    <BrowserRouter>
        <Switch>
            <Route path='/' component={App} exact={true} /> 
            <Route path='/form-example' component={FormExample} />
        </Switch>
    </BrowserRouter>

This solves the problem.

1

If you are nesting other components inside the Router you should do like.

  <Router>
     <div>
       <otherComponent/>
         <div>
           <Route/>  
           <Route/>
           <Route/>
           <Route/>
         </div>
      </div>
    </Router>
1

If you are using Reach Routers make sure the Code looks like this:

<Router>
    <Login path="/" />
    <Login path="/login" />
</Router>

Including these Components in a Div in the case of React Routers will make this work but In Reach Routers, Remove that Div Element.

0

you can also wrap all your route in a parent route which defaults to index page

<Router history={history}>    
   <Route path="/" component={IndexPage}>
      <Route path="to/page" component={MyPage}/>
      <Route path="to/page/:pathParam" component={MyPage}/>
   </Route>    
</Router>
0

I am using react-router-dom package with version 5.0.1 and it works perfectly fine with your code.

import { BrowserRouter as Router , Router, Link } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
...

class App extends React.Component {
  render() {
    return (
      <Router>
        <ul>
          <li><Link path='/'>Home</Link></li>
          <li><Link path='/about'>About</Link></li>
        </ul>
        <Route path='/' exact component={Home} />
        <Route path='/about' component={About} />
      </Router>
    );
  }
}

export default App;
0

Not sure if my router might be too simple, or there was a change to this rule but was following along a tutorial that mentioned this limitation (A 'Router' may have only one child element) and it allowed me to add 3 routes without giving any errors. This is the working code:

function render() {
  ReactDOM.render(
    <BrowserRouter>
      <Route exact path="/" component={App} />
      <Route path="/add" component={AddAuthorForm} />
      <Route path="/test" component={test} />
    </BrowserRouter>
    ,
    document.getElementById('root')
  );
}

And this are my dependencies:

"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.1",
-1

This problem occurs when you don't have parent tag before <Route>inside <Router> so to resolve this problem keep the <Route>enclosed in a parent tag such as <div> , <p> etc. Example -

<Router>
    <p>
       <Route path="/login" component={Login} />
       <Route path="/register" component={Register} />
    </p>
</Router>
1
  • 1
    Most of the time adding a <p> as routes parent would make it invalid html, as you cannot have a <div> within a <p> for example May 9, 2019 at 8:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.