React router dont render component then he have parameter

Question

Hello everyone !

What is my problem ?

I'm trying to make a product details pages, then I'm using this :

 return (
   <Router>
      <div>
         <Header user={this.state.user} setUser={this.setUser} />
      </div>
       <div className="mx-10">
          <Switch>
            <Route exact path="/details/:slug" components={() => <Details />} />
            <Route exact path="/market/search/:categorie" component={DynamicSearchCategory} />
         </Switch>
       </div>
   </Router>
);

This working really well /market/search/:categorie

But if I'm trying to get this pages /details/:slug

I have also try this: /market/details/:slug

Nothing will be show if I get product details route but the header appear but the component that I want to render functional components or class components then nothing will be show

If I do this:

console.log(props)

// or

console.log(this.props) // for class components

Nothing will be show in the console no one error.

I don't know if I have miss anything, and I don't understand why the /market/search/:categorie work well but not the /details/:slug

There is my component who them will receive props:

class components

import React from 'react'

export default class Details extends React.Component {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        console.log(this.props)
    }

    render() {
        return (
            <p>Details</p>
        )
    }
}

Or in functional components:

import React from 'react'

export default function ProductDetails(props) {
    console.log(props.match.params.slug)
    return (
        <>
            <p>Product Details</p>
        </>
    )
}

Edit:

in my navigator the slug appear.

Answer 1

<Route exact path="/details/:slug" components={() => <Details />} />

=>

<Route exact path="/details/:slug" component={Details}/>