在React中渲染Bootstrap Component时空白页面

Question

我是一名前端开发新手，我遇到了以下错误。
所以，我正在设计我自己的项目-本地商店网站，每个组件都是我创建的，但最终我来到了我想使用Carousel的时刻因为我是新手，我只想使用干净的Carousel设计，所以我决定在React中使用Boostrap (React-Boostrap)。然而，当我在我的组件中使用它时，它使我的页面完全空白，它甚至删除了顶部的导航栏组件。

我猜这是一些路由问题，我不能自己识别，所以请善良的开发人员，我需要一些帮助。

Carousel组件，只是复制并粘贴了它，并将其包装在容器中(是的，我试图删除容器，这不是问题)，

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