How to display Products By a Category in React.js-CodePudding

I'm trying to display Categories from a port (http://localhost:5000), my database in MangoDB and it showed up successfully in my app Now when I am trying to display the products for each category separately So it does not work. I tried the same way but the message i receive is "No routes match this location". Can one help me to solve this.

CodePudding user response：

  <BrowserRouter>
      <Routes>

        <Route path="/" element = {<Categories/>} />
        <Route path="/Products/ :categoryId" element = {<Products/>} />
      </Routes>
  </BrowserRouter>

CodePudding user response：

{
                    categories.map(category => (
                                                  
                           <Link to ={`/Products/${category._id}`} className="category-link"> 
                         
                            <Card className="card-style" key={category._id}>
                                 <Card.Img className="card-image" variant="top" src={category.image}/>
                             
                                 <Card.Body className="card-body">
                                    <Card.Title className="card-title">{category.name} </Card.Title>
                                 </Card.Body>
                           
                            </Card>
                          
                         </Link>                       
                    )
                    )
                }

CodePudding user response：

[products component]

let {categoryId} = useParams();

const products_URL =`http://localhost:5000/products/${categoryId}`