我有一个关于产品的页面.我的问题是，当我试图点击一个产品时，URL会发生变化，但屏幕上什么都没有显示.它仍然显示呈现所有产品的组件.
我试了几种不同的方法，但似乎都不管用
<Route path="store" element={<Store />}>
<Route path="protein" element={<Products />} />
<Route path="protein/*" element={<SingleProduct />} />
</Route>
我还try 了:
<Route path="store" element={<Store />}>
<Route path="protein" element={<Products />}>
<Route path="*" element={<SingleProduct />} />
</Route>
</Route>
还包括:
<Route path="/store/protein/*" element={<SingleProduct />} />
所以这不是一个子元素的路由.
但这也没有奏效.你知道我做错了什么吗？
编辑:这是我的store 组件:
import React from "react";
import SidePanel from "../components/storeComponents/SidePanel";
import Products from "../components/storeComponents/Products";
import "./Store.css";
const Store = () => {
return (
<div className="store-page">
<SidePanel />
<Products />
</div>
);
};
export default Store;