contents are displaying twice when calling BrowserRouter on headers and footers

Question

Hello guys, i am learning Reactjs. I have written code on Headers.js for routes and added Link to display on navbar. Same links i would like to display on footers so i made footers/index.js. I have imported footers/index.js and headers on src/index.js unfortunately page contents are displaying two times on root page one for headers and another for footers as shown on this url:

https://www.awesomescreenshot.com/image/2830211/0e5b3019610b6e334939ef50675a0723

Headers.js

import React from 'react';
import {BrowserRouter, Route, Switch, Link} from 'react-router-dom';

import About from './pages/About';
import Contact from './pages/Contact';
import Home from './pages/Home';

export default () => {
 return(
 <BrowserRouter>
  <div>
    <div className="navbar navbar-default">
      <div className="container">
        <div className="navbar-header pull-left">
          <ul className="nav navbar-nav">
            <li className="active"><Link to="/">Home<span class Name="sr-only">(current)</span></Link></li>
            <li><Link to="/contact">Contact</Link></li>
            <li><Link to="/about">About</Link></li>
          </ul>
        </div>
      </div>
    </div>

    <Switch>
      <Route exact path="/" component={Home} />
      <Route exact path="/contact" component={Contact} />
      <Route exact path="/about" component={About} />
    </Switch>
  </div>
</BrowserRouter>
)
}

Footers.js

import React from 'react';
import {BrowserRouter, Route, Switch, Link} from 'react-router-dom';

import About from '../pages/About';
import Contact from '../pages/Contact';
import Home from '../pages/Home';

import './index.css'

export default class Footers extends React.Component {
render() {
return (
  <div>
    <div className="footer-section">
      <div className="container">
        <div className="row">
          <div className="col-sm-4">
            <BrowserRouter>
              <div>
                <ul>
                  <li><Link to="/">Home</Link></li>
                  <li><Link to="/contact">Contact</Link></li>
                  <li><Link to="/about">About</Link></li>
                </ul>


                <Switch>
                  <Route exact path="/" component={Home} />
                  <Route exact path="/contact" component={Contact} />
                  <Route exact path="/about" component={About} />
                </Switch>
              </div>
            </BrowserRouter>
          </div>

          <div className="col-sm-4">
            <h2>Text 2nd</h2>
          </div>
          <div className="col-sm-4">
            <h2>Text 3rd</h2>
          </div>
        </div>
      </div>
    </div>
  </div>
  );
 }
}

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';

import './index.css';
import Headers from './Headers';
import Footers from './footers';

ReactDOM.render(
 <div>
 <Headers/>
 <Footers/>
</div>, document.getElementById('root')
);

Headers and footers has correct menu links and quick links but home component are displaying twice, also when i click on menu links components are rendered on top section, when footer links are clicked components are rendered on second section which is below of footer as per screenshot. How can i solve this? Any solution would be appreciated, thank you!

Answer 1

Why components are rendering twice?

Because you are using the same routing part in two different components, so inside Header routing will work separately and in Footer it will work separately and both component will render one Child component on the basis of path, that's why two components.

---

Solution:

You need to re-structure the routing part, instead of defining the same routes in multiple components, define them in global space like inside index.js file and use their links in different component.

Use BrowserRouter once and put the main routes inside index.js file.

Index file:

ReactDOM.render(
    <BrowserRouter>
        <div>
            <Headers/>
            <Switch>
                <Route exact path="/" component={Home} />
                <Route exact path="/contact" component={Contact} />
                <Route exact path="/about" component={About} />
            </Switch>
            <Footers/>
        </div>
    </BrowserRouter>, document.getElementById('root')
);

Now all these routes will be accessible inside Footer and Header component. To render them use Links in Header and Footer.

Header file:

export default () => (
    <div>
        <div className="navbar navbar-default">
            <div className="container">
                <div className="navbar-header pull-left">
                  <ul className="nav navbar-nav">
                    <li className="active"><Link to="/">Home<span class Name="sr-only">(current)</span></Link></li>
                    <li><Link to="/contact">Contact</Link></li>
                    <li><Link to="/about">About</Link></li>
                  </ul>
                </div>
            </div>
        </div>
    </div>
)

Footer file:

export default class Footers extends React.Component {
    render() {
        return (
            <div className="footer-section">
                <div className="container">
                    <div className="row">
                        <div className="col-sm-4">
                            <div>
                                <ul>
                                  <li><Link to="/">Home</Link></li>
                                  <li><Link to="/contact">Contact</Link></li>
                                  <li><Link to="/about">About</Link></li>
                                </ul>
                            </div>

                            <div className="col-sm-4">
                                <h2>Text 2nd</h2>
                            </div>
                            <div className="col-sm-4">
                                <h2>Text 3rd</h2>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

Answer 2

Move browser router to index.js, this will make it more consistent :

ReactDOM.render(
  <BrowserRouter>
     <div>
       <Headers/>
       <Route exact path="/" component={Home} />
       <Route exact path="/contact" component={Contact} />
       <Route exact path="/about" component={About} />
       <Footers/>
     </div>
  </BrowserRouter>
  , document.getElementById('root')
);

Remove router from header and footer.