引导导航栏组件在反应应用程序中不起作用

Question

我尝试在我的反应应用程序中使用 BootStrap (Navbar) 组件，但它没有显示任何输出和错误，它只是不断地重新加载页面。 我正在使用导航栏反应共通形式React Boot Strap

这是怎么回事，请帮帮我。

感谢您考虑我的问题。

Navbar.js

import React,{Component} from 'react';
import {Link} from 'react-router-dom';
import {Nav,NavItem,NavDropdown,MenuItem} from 'react-bootstrap';

export default class Navbar extends Component {
    render(){
        return(
                <Navbar inverse collapseOnSelect>
                  <Navbar.Header>
                    <Navbar.Brand>
                      <Link to="#brand">React-Bootstrap</Link>
                    </Navbar.Brand>
                    <Navbar.Toggle />
                  </Navbar.Header>
                  <Navbar.Collapse>
                    <Nav>
                      <NavItem eventKey={1} to="#">
                        Link
                      </NavItem>
                      <NavItem eventKey={2} to="#">
                        Link
                      </NavItem>
                      <NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
                        <MenuItem eventKey={3.1}>Action</MenuItem>
                        <MenuItem eventKey={3.2}>Another action</MenuItem>
                        <MenuItem eventKey={3.3}>Something else here</MenuItem>
                        <MenuItem divider />
                        <MenuItem eventKey={3.3}>Separated link</MenuItem>
                      </NavDropdown>
                    </Nav>
                    <Nav pullRight>
                      <NavItem eventKey={1} to="#">
                        Link Right
                      </NavItem>
                      <NavItem eventKey={2} to="#">
                        Link Right
                      </NavItem>
                    </Nav>
                  </Navbar.Collapse>
                </Navbar>
            )
    }

}

`

App.js

import React, { Component } from 'react';
import {BrowserRouter as Router,  Switch,Route } from 'react-router-dom';
import Header from './component/common/header.js';
import Fotter from './component/common/fotter.js';
import Navbar from './component/common/navbar.js';

import './static/css/app.css';


class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">

            <Header />
            <Navbar />
            <Fotter />
        </div>
      </Router>
    );
  }
}

export default App;

Answer 1

我可以在这里看到几个问题：

在你的 Navbar.js 中

1. Import {Navbar} as well from react-bootstrap。 - 可能 react 与您在其中使用的 react-bootstrap 'Navbar' 类“导航栏”混淆了。这就是为什么它在控制台上没有显示任何错误的原因。导入语句应该是 -

   导入 {Navbar, Nav, NavItem, NavDropdown, MenuItem} from '反应引导';

2. 您应该考虑将您的类名“Navbar”更改为可能的 NavigationBar 或您喜欢的其他名称。只要确保你没有在同一个类中使用相同的名字。

希望对你有帮助！