Recibí este error mientras intentaba enrutar algún enlace:

Error no detectado: [HotAccessories] no es un componente de ruta. Todos los hijos componentes de
Las rutas deben ser una ruta o <React.Fragment>

 import './App.css'; import PreNavbar from './Components/PreNavbar'; import Navbar from "./Components/Navbar.js" import { BrowserRouter as Router,Route} from "react-router-dom" import Slider from "./Components/Slider.js" import Offers from "./Components/Offers.js" import data from "./data/data.json"; import Heading from "./Components/Heading.js" import StarProduct from "./Components/StarProduct.js" import HotAccessoriesManu from "./Components/HotAccessoriesManu.js" import HotAccessories from "./components/HotAccessories.js" function App( ) { return ( <Router> <PreNavbar /> <Navbar /> <Slider start = {data.banner.start} /> <Offers offer={data.offer} /> <Heading text = "STAR PRODUCTS"/> <StarProduct starProduct={data.starProduct}/> <Heading text = "HOT ACCESSORIES" /> <HotAccessoriesManu /> <Route exact path="/music"> <HotAccessories music={data.hotAccessories.music} musicCover={data.hotAccessories.music} /> </Route> </Router> ); } export default App;

Aquí está el componente HotAccessories:

 import HotItem from "./HotItemCard.js" const HotAccessories = ({music, musicCover}) => { return ( <div className='HotAccessories'> <div> <img src= {musicCover} alt="Cover" /> </div> {/* ........2nd part */} <div> {music.map((item, index)=>( <HotItem key={item.image} name={item.name} price={item.price} image={item.image} index={item.index} /> ))} </div> </div> ) } export default HotAccessories;

aquí está el componente HotItem:

 import React from 'react' const HotItemCard = ({image,index,name,price}) => { return ( <div className="HotItemCard"> <img src={image} alt={`${index} product`} /> <p>{name}</p> <span>{price}</span> </div> ) } export default HotItemCard

Pero en la terminal me muestra...

webpack 5.68.0 compilado con éxito en 244 ms

Pero no vi ninguna salida.