Reactjs 反应路线：导航栏

单击导航栏时渲染组件时出现问题。因此，当我单击导航栏时，组件在导航栏内部渲染，而不是在导航栏下方。我能做些什么来解决这个问题吗

这是应用程序文件：

//App.js

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

import { Header, Content } from './component/Layout/index';

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

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

const App = () => {
  return (
    <BrowserRouter>
      <div className='App'>
        <Header />
        {/* <Content /> */}

        <Switch>
          <Route path='/films' component={Films} />
          <Route path='/peoples' component={Peoples} />
        </Switch>
      </div>
    </BrowserRouter>
  );
};

export default App;

//App.js
从“React”导入React；
从“react router dom”导入{BrowserRouter，Switch，Route}；
从“./component/Layout/index”导入{Header，Content}；
从“./容器/胶片/胶片”导入胶片；
从“./container/Peoples/Peoples”导入人员；
导入“/App.css”；
导入'bootstrap/dist/css/bootstrap.min.css'；
常量应用=（）=>{
返回(
{/*  */}
);
};
导出默认应用程序；

这是navbar文件：

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

//Header.js
从“React”导入React；
从“react bootstrap”导入{Navbar，NavDropdown，Nav，NavItem}；
从“react Router dom”导入{BrowserRouter as Router，Switch，Route，Link}；
从“../../container/Films/Films”导入胶片；
从“../../container/Peoples/Peoples”导入人员；
从“./Header.module.css”导入类；
常量头=（）=>{
返回(
斯瓦皮库
电影
人
);
};
导出默认标题；

---

如果您有任何帮助，我们将不胜感激，谢谢您从Header.js中删除开关，如下所示

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>
        </Navbar>
      </div>
    </Router>
  );
};

export default Header;

从“react Router dom”导入{BrowserRouter as Router，Switch，Route，Link}；
从“../../container/Films/Films”导入胶片；
从“../../container/Peoples/Peoples”导入人员；
从“./Header.module.css”导入类；
常量头=（）=>{
返回(
斯瓦皮库
电影
人
);
};
导出默认标题；

您在标头组件中也使用了相同的路由代码。 从Header.js中删除路由器代码

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

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

import { 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 (

      <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>
        </Navbar>
      </div>

  );
};

export default Header

请更新Header.js

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

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

import { 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 (

      <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>
        </Navbar>
      </div>

  );
};

export default Header

//Header.js
从“React”导入React；
从“react bootstrap”导入{Navbar，NavDropdown，Nav，NavItem}；
从'react router dom'导入{Link}；
从“../../container/Films/Films”导入胶片；
从“../../container/Peoples/Peoples”导入人员；
从“./Header.module.css”导入类；
常量头=（）=>{
返回(
斯瓦皮库
电影
人
);
};
导出默认标题

因为您的路线内容在导航栏中。 试试这个

斯瓦皮库
电影
人