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

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

尽管尝试安装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;

解决方法

我想以此作为注释，因为这是一种简单快捷的解决方案，但是代码无法在那里格式化。

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

react-bootstrap和reactstrap几乎是一样的东西，它们提供相同的组件。只需使用其中之一，然后导入Navbar和Container。

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