找不到模块：无法解析“react-bootstrap/Navbar”

Question

尽管尝试安装react-bootstrap、reactstrap、添加脚本并从react-bootstrap文档导入，但我仍然收到此错误。

我已经尝试过：

npm i react-bootstrap --save

还有：

npm install react-bootstrap bootstrap

我使用相同的组件创建了一个类似的项目，它工作得很好，我不明白为什么它在这个项目中不起作用。

这是组件文件：

import React from 'react';
import './Header.css'
import Navbar from 'react-bootstrap/Navbar'
import {Container} from "reactstrap";
import 'bootstrap/dist/css/bootstrap.min.css';
import { NavLink } from 'react-router-dom';

const Navigation = () =>{
    return(
        <div className="header">
        <Navbar bg="dark" variant="dark"  expand="lg">
            <Container>
                <Navbar.Brand href="#home"><NavLink to="/">Home</NavLink></Navbar.Brand>
                <Navbar.Brand href="#about"><NavLink to="/catallaxy">Catallaxy</NavLink></Navbar.Brand>
                <Navbar.Brand href="#home"><NavLink to="/events">Events</NavLink></Navbar.Brand>
                <Navbar.Brand href="#about"><NavLink to="/about">About Us</NavLink></Navbar.Brand>
                <Navbar.Brand href="#contact"><NavLink to="/contact">Gallery</NavLink></Navbar.Brand>
            </Container>
        </Navbar>
        </div>
    )
}
export default Navigation;

Answer 1

我想把它作为评论，因为它是一个简单而快速的解决方案，但代码无法在那里格式化。

import React from 'react';
import './Header.css'
import {Container, Navbar } from "reactstrap"; //this line here is the solution.
import 'bootstrap/dist/css/bootstrap.min.css';
import { NavLink } from 'react-router-dom';

你的package.json应该有像这样的reactstrap。

  "dependencies": {
    "classnames": "2.2.6",
    "moment": "2.26.0",
    "node-sass": "4.14.1",
    "nouislider": "14.5.0",
    "react": "16.13.1",
    "react-bootstrap-switch": "15.5.3",
    "react-datetime": "2.16.3",
    "react-dom": "16.13.1",
    "react-router": "5.2.0",
    "react-router-dom": "5.2.0",
    "react-scripts": "3.4.1",
    "reactstrap": "8.4.1". <------- here
  }

这通常是有效的。这是工作导航栏的参考链接 - https://github.com/Jay-study-nildana/RandomStuffReactJSApp/blob/master/src/components/Navbars/IndexNavbar.js

Answer 2

react-bootstrap

和

reactstrap

几乎是相同的东西，它们提供相同的组件。 只需使用其中之一并导入导航栏和容器即可。

import {Container, Navbar} from "react-bootstrap"

Answer 3

我也面临着同样的问题

解决方案：

从“react-bootstrap”导入{容器，导航栏}；

注意：确保您已经安装了以下软件包：

npm i --保存react-bootstrap

结果：