reactjs - Bootstrap Navbar 组件在 react 应用程序中不起作用

Question

我尝试在我的 react 应用程序中使用 BootStrap (Navbar) 组件，但它没有显示任何输出和错误，它只是不断重新加载页面。 我使用 Navbar react 共模形式 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. 从react-bootstrap导入{Navbar}。 - 可能 react 与您在其中使用的react-bootstrap“Navbar”类“Navbar”混淆了。这就是为什么它不会在控制台上显示任何错误。导入语句应该是 -

   导入 {Navbar, Nav, NavItem, NavDropdown, MenuItem} 'react-bootstrap';

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

希望对你有帮助!