在 React 中渲染 Bootstrap 組件時出現空白頁

Question

我是前端開發的新手，遇到了以下錯誤。
所以，我正在設計我自己的項目 - 本地商店網站，我創建的每個組件，但最終我來到了我想使用Carousel來展示產品等的那一刻，因為我是新手，我只想使用 clean輪播設計我決定使用 Boostrap for React (React-Boostrap)。 但是，當我在我的組件中使用它時，它會使我的頁面完全空白，它甚至會刪除頂部的導航欄組件。

我想這是我自己無法識別的一些路線問題，所以請善良的開發人員，我需要一些幫助。

這是代碼：
Carousel 組件，只是復制並粘貼它，並將其包裝在 Container 中（是的，我也嘗試刪除容器，這不是問題），

import React from 'react'
import { MainContainer } from '../styles/Products.style'
import Carousel from 'react-bootstrap/Carousel'

const Products = () => {
  return (
    <MainContainer>
      <Carousel>
    <Carousel.Item>
      <img
        className="d-block w-100"
        src="holder.js/800x400?text=First slide&bg=373940"
        alt="First slide"
      />
      <Carousel.Caption>
        <h3>First slide label</h3>
        <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
      </Carousel.Caption>
    </Carousel.Item>
    <Carousel.Item>
      <img
        className="d-block w-100"
        src="holder.js/800x400?text=Second slide&bg=282c34"
        alt="Second slide"
      />
  
      <Carousel.Caption>
        <h3>Second slide label</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </Carousel.Caption>
    </Carousel.Item>
    <Carousel.Item>
      <img
        className="d-block w-100"
        src="holder.js/800x400?text=Third slide&bg=20232a"
        alt="Third slide"
      />
  
      <Carousel.Caption>
        <h3>Third slide label</h3>
        <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
      </Carousel.Caption>
    </Carousel.Item>
  </Carousel> 
  </MainContainer>
     
  )
}

export default Products

這是 App.js ：

import "./App.css";
import Navbar from "./components/Navbar";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Login from "./components/Login";
import Home from "./components/Home";
import Products from "./components/Products";



function App() {
  return (
    <Router>
      <Navbar />
      
      <Routes>
        <Route path="/" element={<Home/>}/>
        <Route path="/products" element={<Products/>}/>
        <Route path="/contact" />
        <Route path="/about" />
        <Route path="/signup" element={<Login/>} />
        <Route path="/logout" />
        
      </Routes>

    </Router>
  );
}

export default App;

我不確定它是否有幫助，但粘貼它以防萬一 - package.json

{
  "dependencies": {
    "axios": "^0.27.2",
    "bootstrap": "^5.1.3",
    "react-bootstrap": "^2.4.0",
    "react-reveal": "^1.2.2",
    "react-router-dom": "^6.3.0" // added this manually, just to try it it didnt work
  }
}

Answer 1

我已經復制/粘貼了您的代碼，當我轉到“/products”時，我可以看到滑塊。 但是我不得不注釋掉 MainContainer 因為我沒有它的代碼。 （但是您已經說過 MainContainer 無論如何都不是問題）。

https://codesandbox.io/s/elastic-vaughan-6bjv3t