React.js

Hello ,
i hope you doing well.

i have question regarding React Router. The below , MainPAgeContainer compenent did not show on display. Header and Search is displaying MainPageContainer not. Could you tell me please

this is App.js di

function App (props) {

  return (

    <div className="App">
   
      <div className="body">

<div className = "background_image">  
 
<Route path='/e-commerce/' component={Header}/>

<Route path='/e-commerce/' exact component={SearchHeader}/> 

</div>

<div className = "background_image"> 
    
      <Route
      path="/e-commerce/detailed/:id?"
      render={() => <Detailed product={props.productsInfo}/>}/>

</div>

</div>
      
<div  className="main">

  <Route path="/e-commerce" component={MainPageContainer}/>
 </div>
    
    </div>

this is index.js

ReactDOM.render( 
  <Provider store={store}>
   <BrowserRouter>
   <Route path= '/'  render={()=> <App />}/>
   </BrowserRouter>
</Provider>  ,
  document.getElementById('root')
);