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;
这是导航栏文件:
//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;
任何帮助将不胜感激,谢谢
解决方案
因为您在导航栏中的路线内容。尝试这个
<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>
<Router>
<Switch>
<Route path='/films' component={Films} />
<Route path='/peoples' component={Peoples} />
</Switch>
</Router>
</div>
推荐阅读
- javascript - 列表项组件未在反应 js 中的状态更改时更新
- vue.js - 子路由中的 vue-router 命名视图不起作用
- php - 从表单获取数据的 SQL 更新查询未运行
- wso2 - 在 WSO2 EI 6.4 中批量导入注册表工件
- python - 无法使用 api 在 Jira 中创建项目,每当我尝试运行此脚本时都会收到 400 错误代码。谁能帮我解决这个问题
- javascript - 修复错误:无法读取未定义的属性“路径”
- python - 如何使用“--”标志运行 Anaconda Powershell 命令
- assembly - 使用某些寄存器(rbx 除外)访问 bss 数据时出现 ASM Segfault
- javascript - 在异步函数结束之前存储数据并可以在 javascript 中使用它们
- html - 我无法在不破坏我的网站的情况下调整图像大小