React，“product/:id”页面导致组件资产从不正确的路径（错误的路径）加载

Question

我正在创建一个带有反应的产品 linding 页面（单个产品页面），但是在加载导航栏组件时

它会导致组件的帮助从错误的路径加载，例如产品页面路径是 (/product/:id) 导航栏组件将去 (/product/:id/assist name ) 获取辅助 witch 不会加载辅助 因为那不是 asities 的正确道路。 存在于 (./assist name )

app.js 文件

function App() {
  return (
    <Router>
      <Container>
        <Routes>
          <Route path="/"  element={<Home />} />

          <Route path="/login" element={<Login />} />
          <Route path="/checkout" element={<Checkout />} />
          <Route path="/signup" element={<SignUp />} />
          <Route path="/address" element={<Address />} />
          <Route path="/payment" element={  <Payment />  } />
          <Route path="/addproduct" element={<AddProduct />} />
          <Route path="/teast" element={<FirebaseUpload />} />
          <Route path="/teast2" element={< Uploadfile2/>} />
          <Route path="/teast3/:id" element={< Empty/>} />
          <Route path="/products/:id" element= {<SingleProductPage/>} />
          <Route path="/orders" element={<Orders />} />
        </Routes>
      </Container>
    </Router>
  );
}

单品页面 有 (/product/:id) 路径

function SingleProductPage() {

 
  const [ {ReducerProducts , basket},dispatch] = useStateValue();
  console.log("Rproduct>>>>>>>",ReducerProducts[0].Data)
  console.log("basket>>>>>>>",basket)

   const {id} = useParams()
  let  product = ReducerProducts[0].Data ; 

 const THEproduct =  product.find(Prod => Prod._id === id) ;

   console.log("product>>>>>",product);
   console.log("productID>>>>>",THEproduct  );
  return (
    

    <div id="single-Container">
      
      <Navbar/>
     
      single page

    </div>
    



    )
}