React-Router only one child

Question

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'));

Things (`Link`, `Route`) inside `BrowserRouter` need to be wrapped inside a `div` — onmyway133, Aug 10 '18 at 10:18

QoP · Accepted Answer · 2017-10-17T12:22:51.343

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

edited Oct 17 '17 at 12:22

answered Mar 24 '17 at 06:39

QoP

27,388
16
74
74

27

Strange. Why is this? – Cameron Apr 24 '17 at 06:57
2

[`Router`](https://github.com/ReactTraining/react-router/blob/master/packages/react-router/modules/Router.js#L53) expects `this.props.children` to be `null` or to have length equal to 1 – QoP Apr 28 '17 at 23:46
1

This isn't working, it just displays both routes in the same place. – NSCoder May 26 '17 at 12:45
4

It displays both routes because it is using `div`, you really should use `switch` instead. This makes the route exclusive https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Switch.md – Don Djoe May 30 '17 at 13:09
There is a component to do this wrapper: Switch – Adriano Godoy Jul 18 '17 at 18:30
It works for me, but it seems like the common way is using Switch. Anyway, thanks for the answer! – Daisy QL Mar 19 '18 at 19:04

score 40 · Answer 2 · edited Mar 14 '18 at 01:23

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'

edited Mar 14 '18 at 01:23

ErichBSchulz

15,047
5
57
61

answered Apr 28 '17 at 23:45

FeifanZ

16,250
7
45
84

1

I'm getting *Uncaught ReferenceError: Switch is not defined* Error when I'm using Switch – NSCoder May 26 '17 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 '17 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 '17 at 20:27

score 3 · Answer 3 · answered May 02 '18 at 18:25

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

score 2 · Answer 4 · answered Jun 01 '18 at 09:45

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.

score 1 · Answer 5 · answered Feb 28 '19 at 01:36

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

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

score 1 · Answer 6 · answered Sep 29 '20 at 19:01

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.

score 0 · Answer 7 · answered Mar 03 '19 at 12:31

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>

score 0 · Answer 8 · answered Sep 12 '19 at 07:19

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;

score 0 · Answer 9 · answered Mar 31 '20 at 02:59

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",

MERLIN THOMAS · Answer 10 · 2017-11-13T06:53:47.010

-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>

edited Nov 13 '17 at 06:53

answered Nov 13 '17 at 06:37

MERLIN THOMAS

747
1
7
15

1

Most of the time adding a
as routes parent would make it invalid html, as you cannot have a
within a
for example
– borisrorsvort May 09 '19 at 08:14

React-Router only one child

10 Answers10

Linked