Reactjs 引导Navbar组件在react应用程序中不工作

我尝试在我的react应用程序中使用引导（Navbar）组件，但它并没有显示任何输出和错误，只是不断地重新加载页面。 即时通讯使用导航栏反应组件形式

有什么问题，请帮帮我

谢谢你考虑我的问题

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>
            )
    }

}

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;

import React，{Component}来自'React'；
从'react router dom'导入{Link}；
从“react bootstrap”导入{Nav、NavItem、NAVDROPOLDOWN、MenuItem}；
导出默认类导航栏扩展组件{
render（）{
返回(
反应自举
链接
链接
行动
另一个动作
还有别的吗
分离环
链接权
链接权
)
}
}

`

App.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>
            )
    }

}

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;

import React，{Component}来自'React'；
从“react Router dom”导入{BrowserRouter as Router，Switch，Route}；
从“./component/common/Header.js”导入标题；
从“./component/common/Fotter.js”导入Fotter；
从“/component/common/Navbar.js”导入导航栏；
导入“/static/css/app.css”；
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

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

在Navbar.js中

也从react引导导入{Navbar}

-可能react与您的类“Navbar”和您在其中使用的react引导程序“Navbar”混淆了。这就是为什么它不会在控制台上显示任何错误。进口声明应为-

从导入{Navbar、Nav、NavItem、NavDropdown、MenuItem} “反应引导”

>P>你应该考虑把你的类名“Navar”更改为导航栏或其他你喜欢的东西。只要确保在同一个类中没有使用相同的名称

---

希望有帮助

耶！它工作了，如果有必要，那么为什么它现在在终端中显示错误呢？因为在类“Navbar”范围中，react将“Navbar”视为已知元素。但是，我在本地尝试了它，当它使用消息“check Navbar.js render method…”进行渲染时，它确实会抛出错误。