单击导航栏时,渲染组件时出现问题。因此,当我单击导航栏时,该组件将在导航栏内而不是在导航栏下方进行渲染。有什么我可以解决的吗?
这是App文件:
//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;
这是导航栏文件:
//Header.js
import React from 'react';
import { Navbar,NavDropdown,Nav,NavItem } from 'react-bootstrap';
import { BrowserRouter as Router,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;
任何帮助将不胜感激,谢谢