reactjs - 如何在 Reactjs 中从 Bootstrap 添加导航栏
问题描述
我无法在我的项目中添加导航栏。我想在我的导航栏中有我的路线,但我不知道该怎么做
在我的 Navbar.js
import { Button, Nav, NavDropdown, Form, FormControl } from 'react-bootstrap';
class Navbar extends Component {
render() {
return (
<Navbar bg="light" expand="lg">
<Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="#home">Home</Nav.Link>
<Nav.Link href="#link">Link</Nav.Link>
<NavDropdown title="Dropdown" id="basic-nav-dropdown">
<NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.2">Another action</NavDropdown.Item>
<NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item href="#action/3.4">Separated link</NavDropdown.Item>
</NavDropdown>
</Nav>
<Form inline>
<FormControl type="text" placeholder="Search" className="mr-sm-2" />
<Button variant="outline-success">Search</Button>
</Form>
</Navbar.Collapse>
</Navbar>
);
}
}
export default Navbar;
在我的 App.js
import Navbar from "./components/layout/Navbar";
class App extends Component {
render() {
return (
<Provider store={store}>
<Router>
<div className="App">
<Navbar />
<Route exact path="/" component={Home} />
<Route exact path="/landing" component={Landing} />
<Route exact path="/register" component={Register} />
<Route exact path="/login" component={Login} />
<Switch>
<PrivateRoute exact path="/dashboard" component={Dashboard} />
</Switch>
</div>
</Router>
</Provider>
);
}
}
export default App;
该页面仅加载但没有任何反应。我遵循了 React-Bootstrap 文档,但没有
解决方案
嗨@jocewl:我试图解决这个问题,我注意到与组件命名“Navbar”存在冲突,这也是组件中的引导程序,您的组件也具有相同的名称。
你可以看到我的代码框。链接:https ://codesandbox.io/s/navbarbootstrap-6d4k8?file=/src/NavBar.js
如果它是您正在寻找的东西,请告诉我,如果它解决了您的问题,请喜欢它。
谢谢
推荐阅读
- google-apps-script - 在 Google Apps 脚本操作处理程序中,如何获取选择输入的值?
- c# - IronPython.Runtime.UnboundNameException:未定义名称“str”
- python-3.x - 如何正确拆分数据行-ValueError:解包的值太多
- wordpress - Wordpress add_menu_page() - 不显示内容
- laravel - 在同一模型中使用多对多关系的正确方法是什么
- node.js - 是否有正确的方法通过进行 IP 匹配来进一步保护数据?
- k6 - K6 我如何制作原始(非编码)帖子
- r - 如何在不添加日期的情况下将字符转换为具有小数秒的时间?
- dart - StreamBuilder 的列表长度?
- python - 当它处于焦点时,如何将命令绑定到输入框?