反應路由器，路由不工作

Question

我在嘗試路由某些鏈接時遇到此錯誤：

未捕獲的錯誤：[HotAccessories] 不是 Route 組件。 的所有子組件
路由必須是 Route 或 <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;

這是 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;

這是 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

但在終端它告訴我......

webpack 5.68.0 在 244 毫秒內編譯成功

但我沒有看到任何 output

Answer 1

代替

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

嘗試這個

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

閱讀反應路由器文檔的這一部分。

請記住，所有<Route />元素都應該是<Routes>組件的子元素。