在 React 中渲染 Bootstrap 组件时出现空白页

Question

I am kind of new at Front-end development, and I encountered the following bug.
So, I was designing my own project - local store site, every component created by me, but eventually I came to the moment where I would like to use Carousel for displaying products etc, since I'm new and I just wanted to use clean Carousel designs I decided to use Boostrap for React (React-Boostrap). However, when I use it in my component, it renders my page completely blank, it even removes my Navbar component at the top.

I guess it is some Route issue which I could not identify by myself, so please kind developers, I need some help.

Here is the code:
The Carousel component, just copied and pasted it , and wrapped it in Container (yes I tried to remove the container too that's not the issue),

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

This is the 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;

Annd Im not sure if it helps but, pasting it just in case - 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

I have copy/pasted your code and when I go to "/products" I can see the slider. However I had to comment out MainContainer because I have no code for it. (But you have said MainContainer is not the issue anyway).

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