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

我无法在项目中添加导航栏。 我希望在导航栏中有我的路线，但我不知道怎么做

在我的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;

从'react bootstrap'导入{Button，Nav，NavDropdown，Form，FormControl}；
类导航栏扩展组件{
render（）{
返回(
反应自举
家
链接
行动
另一个动作
某物
分离环
搜寻
);
}
}
导出默认导航栏；

在我的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;

从“/components/layout/Navbar”导入导航栏；
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

---

页面只加载，但什么也没有发生。我按照React Bootstrap文档的要求进行操作，但没有任何内容，Hi@jocewl:我试图解决这个问题，我注意到组件命名“Navbar”存在冲突，这也是一个Bootstrap内置组件，您的组件也有相同的名称

你可以看到我的代码沙盒。 链接：

让我知道它是否是你想要的，如果它解决了你的问题，你会喜欢它

---

谢谢

你好。考虑使用一个可重复使用的演示。