如何在Reactjs中从Bootstrap添加导航栏

Question

我无法在项目中添加导航栏。我想在导航栏中显示我的路线，但我不知道如何

在我的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文档，但没有

Answer 1

Hi@jocewl：我试图解决这个问题，但我注意到组件命名有冲突"Navbar"，这也是一个bootstrap内置组件，您的组件也有相同的名称。

你可以看到我的代码沙盒。链接：https://codesandbox.io/s/navbarbootstrap-6d4k8?file=/src/NavBar.js

如果它是你想要的，请告诉我，如果它解决了你的问题，请喜欢它。

感谢