React js, confuses fetch url with another fetch-CodePudding

In my Home component I have this fetch function

export default function Home(){

const {rootUrl} = useContext(UserContext); useEffect(()=>{

fetch(`${rootUrl}/api/products/featuredProducts`)
.then(result=> result.json())
.then(result=>{

    console.log(result);
})},[])

}

That is supposed to pull products from the db which are featured. But everytime I try to run that fetch it confuses with another fetch in my app which is the get single product fetch, which is this code:

export default function ProductView(){

const {productId} = useParams();
const{rootUrl} = useContext(UserContext);
const{addToCart} = useContext(UserContext);
const [productData, setProductData] = useState('') 



useEffect(()=>{

    fetch(`${rootUrl}/api/products/${productId}`)
    .then(result=> result.json())
    .then(result=>{

        setProductData(result);
    })

},[])

I will get an error in my backend api with this message:

 CastError: Cast to ObjectId failed for value "featuredProducts"

That "featuresProducts" is my endpoint for my first fetch. It seems that something is confusing it as my parameter ID for my second fetch url in my ProductView component, this fetch below:

fetch(`${rootUrl}/api/products/${productId}`)

I don't understand why is this happening as my other routes with "api/products/plus other endpoints here" work just fine, it's just this my new addition to fetch featured products won't work

CodePudding user response：

You defined your route as /products/:id, so whenever your backend sees a route like /products/anything it will automatically (and correctly) assume the anything is id. You can combat this in various ways.

What I would do is, create one route for fetching with id:

/products/id/:id

and another for featured:

/products/featured

in your backend.