React-bootstrap 组件破坏了我的整个页面

Question

我正在使用 react-bootstrap 开发一个 React 前端。 React 工作正常，但是当我在任何页面中使用任何 react-bootstrap 组件时，Chrome 只显示一个完全空白的页面。

我认为问题可能出在 index.html。我在 <head> 标签中有这个，但没有显示警报，我不确定它是否应该显示。

<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"></script>

<script>var Alert = ReactBootstrap.Alert;</script>

无论如何，这是我认为相关的所有其他代码：

这是我的 index.js:

import React from 'react';
import {createRoot} from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.scss';
import App from './App';
import reportWebVitals from './reportWebVitals';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render(
    <React.StrictMode>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </React.StrictMode>
);

reportWebVitals();

这是我的 App.js 工作正常，Chrome 显示文本：

import React from 'react';

export default function App() {
    return (
        <div className="App">
            <p>This is some text.</p>
        </div>
    );
}

这是我的App.js不工作。它没有给出任何错误，只是一个完全空白的页面，甚至没有显示文本。

import React from 'react';
import { Button } from 'react-bootstrap';

export default function App() {
    return (
        <div className="App">
            <p>This is some text.</p>
            <Button variant="primary" type="button" value="Input" />
        </div>
    );
}

任何 bootstrap 组件都会发生这种情况，而不仅仅是 Button（我试过几次）。我是 React 新手，欢迎提供任何帮助。

编辑：这是发生空白页问题时Chrome控制台的屏幕截图。

编辑 2：这是我的 package.json:

{
  "name": "asignacionesfrontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "bootstrap": "^5.1.3",
    "http-proxy-middleware": "^2.0.4",
    "jest-editor-support": "^30.0.2",
    "react": "^18.0.0",
    "react-bootstrap": "^2.2.3",
    "react-dom": "^18.0.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "^5.0.1",
    "sass": "^1.50.0",
    "sweetalert": "^2.1.2",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "set HTTPS=true&&react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "prestart": "node aspnetcore-https && node aspnetcore-react"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Answer 1

试试这个

<Button href="#" variant="primary" type="button" value="Input" />

Answer 2

您似乎没有正确设置 react-bootstrap 和 bootstrap。使用 react-bootstrap 时，您不需要 bootstrap 中的 js-bundle，而是 css。您有两个选择：

安装 bootstrap (npm i bootstrap) 并将 import 'bootstrap/dist/css/bootstrap.min.css'; 添加到您的 index.js 或 App.js 文件

或使用 CDN：将以下代码段粘贴到您的 index.html:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
  integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
  crossorigin="anonymous"
/>

https://react-bootstrap.netlify.app/getting-started/introduction/#stylesheets

Answer 3

我解决了。我需要在我的项目文件夹中使用 npm 安装所有包。我将它们安装在我的 Windows 用户文件夹和全局文件夹中，但没有安装在我的项目中。

基本上，只需在您的项目文件夹和运行中打开一个命令：

C:\SomePath\MyReactProject>npm install react-bootstrap bootstrap

React-bootstrap 组件破坏了我的整个页面

React-bootstrap components breake my whole page

javascript

reactjs

react-bootstrap