Question

我尝试在我的反应应用程序中使用BootStrap（Navbar）组件，但它没有显示任何输出和错误，它只是连续重新加载页面。我使用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

中

<强> Import {Navbar} as well from react-bootstrap 即可。 - 可能的反应与你的班级相混淆＆＃39; Navbar＆＃39;与react-bootstrap＆＃39; Navbar＆＃39;你在里面用过它。这就是它在控制台上没有显示任何错误的原因。 import语句应为 -

导入{Navbar，Nav，NavItem，NavDropdown，MenuItem} ＆＃39;反应的自举＆＃39 ;;

您应该考虑更改您的班级名称＆＃39; Navbar＆＃39;可能是NavigationBar或其他你喜欢的东西。请确保您没有在同一个班级中使用相同的名称。

希望它有所帮助！

Bootstrap Navbar组件在反应应用程序中不起作用

1 个答案: