Router only have one child component error

Question

I want to create a page in such a way that it will route in such a way....... that

App.js to HomePage.js to Footer.js. Now when I try to perform this task it shows error that Router has only 1 child element.

Code for App.js:

import React, { Component } from 'react';
import logo from './logo.svg';
import HomePage from './Home_page'

import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <HomePage />
      </div>
    );
  }
}

export default App;

Code for Home_page.js

import React, {Component} from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import FooterPage from './FooterPage';
class HomePage extends Component {
  render(){
    return(
    <Router>

      <div>
        <Link to='./FooterPage'>Footer Page</Link>
      </div>
      <Switch>
        <Route exact path='./FooterPage' component={FooterPage} />
      </Switch>
    </Router>
    );
  }
}
export default HomePage;

Code for Footer.js

import React, {Component} from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
class FooterPage extends Component {
  render(){
    return(
      <div>

      </div>
    );
  }
}
export default FooterPage;

Share your code but I am assuming you are using react-router cover your route tags with
or (for single route) tag. — Barbaros, Feb 20 '18 at 12:22
Possible Duplicate of [React-router can have only one child](https://stackoverflow.com/questions/48862194/module-react-router-dom-not-found-error/48862336#48862336) — Shubham Khatri, Feb 20 '18 at 12:41
So you are saying that I will required to wrap all route in the final file index.js only? — Yash Choksi, Feb 20 '18 at 12:43
And where to mention link element in the respective pages only?? — Yash Choksi, Feb 20 '18 at 12:46
No, your Home_Page.js contains, two JSX elements as children to Router, wrap them within a div — Shubham Khatri, Feb 20 '18 at 12:52
Yash, at your home_page.js you have two elements inside , a div and a Switch. Put both inside an other div, you should have an unique child inside Route. See https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/BrowserRouter.md — Daniel Artola, Feb 20 '18 at 15:12

score 1 · Accepted Answer · answered Feb 20 '18 at 15:15

1

At your Home_Page.js

import React, {Component} from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import FooterPage from './FooterPage';
class HomePage extends Component {
  render(){
    return(
    <Router>
      <div>
        <div>
          <Link to='./FooterPage'>Footer Page</Link>
        </div>
        <Switch>
          <Route exact path='./FooterPage' component={FooterPage} />
        </Switch>
      </div>
    </Router>
    );
  }
}
export default HomePage;

here you have only one child inside Route, not two. See https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/BrowserRouter.md

answered Feb 20 '18 at 15:15

Daniel Artola

329
3
10

I understand what you mentioned, but why should I need to wrap my 2 elements in main div element? – Yash Choksi Feb 20 '18 at 15:17
Because the BrowserRouter needs a single child node, "A single child element to render.". If you want more info about why, I recommend you to check this https://reactjs.org/docs/react-api.html#react.children.only – Daniel Artola Feb 20 '18 at 15:19
Ok, thanks for that documentation link it will be really helpful. I will look forward for that. – Yash Choksi Feb 20 '18 at 15:21
By the way, if you are using react 16, you can replace the div in a react.fragment to wrap all in one child. to see more about that: https://reactjs.org/docs/fragments.html – Daniel Artola Feb 20 '18 at 15:29

Router only have one child component error

1 Answers1