Réagir de la route: NAVBAR

J'ai un problème pour rendant un composant lorsque je clique sur la barre NAV. Donc, lorsque je clique sur la barre NAV, le composant ralentit dans la barre NAV au-dessous de la barre NAV. Y a-t-il quelque chose que je puisse faire pour résoudre ce problème?

Ceci est le fichier d'application: p> xxx pré>

Ceci est le fichier NAVBAR: P>

//Header.js
import React from 'react';

import { Navbar, NavDropdown, Nav, NavItem } from 'react-bootstrap';

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

import Films from '../../container/Films/Films';
import Peoples from '../../container/Peoples/Peoples';

import classes from './Header.module.css';

const Header = () => {
  return (
    <Router>
      <div className={classes.header}>
        <Navbar bg='dark' expand='lg'>
          <Navbar.Brand href='#home' className='text-white'>
            Swapiku
          </Navbar.Brand>
          <Navbar.Toggle aria-controls='basic-navbar-nav' />

          <Nav className='mr-auto text-secondary'>
            <Nav.Link className='text-secondary' href='#films'>
              <Link to={'/films'}> Films </Link>
            </Nav.Link>
            <Nav.Link className='text-secondary' href='#people'>
              <Link to={'/peoples'}> People </Link>
            </Nav.Link>
          </Nav>
          <Switch>
            <Route path='/films' component={Films} />
            <Route path='/peoples' component={Peoples} />
          </Switch>
        </Navbar>
      </div>
    </Router>
  );
};

export default Header;