React router , routes not wrking-CodePudding

I got this error while i trying to route some link:

Uncaught Error: [HotAccessories] is not a Route component. All component children of
Routes must be a Route or <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;

Here is the HotAccessories component:

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;

here is HotItem component:

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

But in the terminal it's show me ....

webpack 5.68.0 compiled successfully in 244 ms

But i did't seen any output

CodePudding user response：

Instead of

  <Route exact path="/music">
   <HotAccessories music={data.hotAccessories.music} musicCover={data.hotAccessories.music}  />
  </Route>

Try this

      <Route exact path="/music" element={
        <HotAccessories music={data.hotAccessories.music} musicCover={data.hotAccessories.music}  />}
      />

read this section of the react router docs.

Keep in mind that all of your <Route /> elements should be children of the <Routes> component.