Error is: A may have only one child element

Question

I have problem in React.js when I save the code the website page say:

A <Router> may have only one child element

What is the problem and how can I solve it?

import React, { Component } from 'react';
import Head from './component/head';
import Contacts from './component/contacts';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import Addcontacts from './component/Addcontacts';

import { Provider } from "./context";

import 'bootstrap/dist/css/bootstrap.min.css';

class App extends Component {
    render() {
        return (
            <Provider>
                <Router>
                    <Head promo = 'alow' />
                    <div className='container'>
                        <Switch>
                            <Route exact path='/' Component={Contacts} />
                            <Route exact path='/add' Component={Addcontacts} />
                        </Switch>
                    </div>
                </Router>
            </Provider>
        );
    }
}

export default App;

Possible duplicate of [React-Router only one child](https://stackoverflow.com/questions/42992911/react-router-only-one-child) — evgeni fotia, Oct 22 '18 at 15:27

score 0 · Answer 1 · answered Oct 22 '18 at 15:25

you can use React.Fragment https://reactjs.org/docs/fragments.html#short-syntax to fix this issue.

     <Router>
        <>
          <Head promo = 'alow' />
          <div className='container'>
            <Switch>
              <Route exact path='/' Component={Contacts} />
              <Route exact path='/add' Component={Addcontacts} />
            </Switch>
          </div>
       </>
     </Router>

So basically you just need to have a single tag in you compenent as a child.

score 0 · Answer 2 · answered Oct 22 '18 at 15:25

0

Inside your <Router> wrap everything in a single <div> like this

<Router>
  <div>
  // all your content
  </div>
 </Router>

answered Oct 22 '18 at 15:25

Josh

20
4

score 0 · Answer 3 · answered Oct 22 '18 at 15:35

Router expect this.props.children to be null or to have length equal to 1

In your case its more than 1

So if you wrap all attr. inside a single tag it should work fine

You can use any of these

<> => React.Fragment
<div> => DIV

Eg:

class App extends Component {
      render() {
        return (
          <Provider>
            <Router>
                <div>
                  <Head promo = 'alow' />
                  <div className='container'>
                    <Switch>
                      <Route exact path='/' Component={Contacts} />
                      <Route exact path='/add' Component={Addcontacts} />
                    </Switch>
                  </div>
                </div>
            </Router>
          </Provider>
        );
      }
    }

Error is: A may have only one child element

3 Answers3