我刚刚开始学习react-bootstrap,我遇到了使NavBar组件正确呈现的问题。首先,我复制了https://react-bootstrap.github.io/components/navbar/上找到的基本导航栏的代码,但我得到的只是以下内容。
如下所示: navbar-component
据我所知,我已经掌握了一切,包括index.html头部的css和使用带有css-loader的webpack。很明显,我错过了一些东西,需要一些帮助!
Navigation.js
import React from 'react';
import { NavLink } from 'react-router-dom';
import { Navbar, Nav, NavItem, NavDropdown, MenuItem } from 'react-
bootstrap';
const Navigation = () => (
<div>
<Navbar>
<Navbar.Header>
<Navbar.Brand>
<a href="#home">React-Bootstrap</a>
</Navbar.Brand>
</Navbar.Header>
<Nav>
<NavItem eventKey={1} href="#">
Link
</NavItem>
<NavItem eventKey={2} href="#">
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.4}>Separated link</MenuItem>
</NavDropdown>
</Nav>
</Navbar>
</div>
);
export default Navigation;
webpack.config.js
const path = require('path');
console.log(path.join(__dirname, 'public'));
module.exports = {
entry: './src/app.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
}, {
test: /\.s?css$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}]
},
devtool: 'cheap-module-eval-source-map',
devServer: {
contentBase: path.join(__dirname, 'public'),
historyApiFallback: true
}
};
index.html中的链接
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
我的应用程序还没有使用create-react-app构建,但是我从头开始学习了udemy的课程,所以也许有些东西搞砸了,我不知道?
感谢任何帮助!
答案 0 :(得分:4)
我相信react-bootstrap目前仅适用于v3 ..请改用此链接..
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
如果您想要Bootstrap 4,请尝试使用reactstrap
答案 1 :(得分:2)
react-bootstrap
旨在与Bootstrap 3一起使用。
在introduction section中有警告:
React-Bootstrap目前针对Bootstrap v3。使用 React-Bootstrap,包括用于Bootstrap v3而不是Bootstrap的CSS V4。