React Router v4 не отображает компонент в маршруте с параметрами

Я работаю над проектом на сайте электронной коммерции, и в настоящее время у меня настроены правильные маршруты для домашней страницы на "/" и для страницы со списком продуктов на "/:id". Я пытаюсь настроить маршрут для одной страницы продукта, однако response-router не отображает мой компонент вообще.

Index.js

ReactDOM.render((
  <BrowserRouter>
    <App />
  </BrowserRouter>), document.getElementById('root'));
  registerServiceWorker();

App.js

<Switch>
  <Route exact path = "/" render = {()=> apiDataLoaded ? <HomeLayout data = {data}/> : <div>Loading...</div>}/>
  <Route path = "/:id" render = {(props)=> <ProductListLayout {...props} />} />
</Switch>

Листинг Компонент

return (
  <Switch>
    <div className = "product-list-item-card">
      <div className = "product-list-item-img" style = {bgImage}></div>
      <div className = "product-list-item-content">
        <div className = "product-list-item-overlay">
          <Link to = {`/products/${id}`}>
              <DetailsBtn />
          </Link>
        </div>
        <h3>{name}</h3>
        <h6>{brand}</h6>
        <span>${msrp}</span>
        <p>${sale}</p>
      </div>
    </div>
    <Route path = {'/products/:product_id'} render = {()=> <div>Product Page</div>}/>
  </Switch>
)}

В компоненте листинга выше, когда я проверяю ссылку, изменяется только URL-адрес? Есть идеи относительно того, что я делаю неправильно? Спасибо.

Решено

Изменение порядка маршрутов в App.js было лишь частью решения. Я также переместил свой маршрут из компонента Listing в App.js в верхней части порядка маршрутов, и теперь он работает!

Новый App.js

<Switch>
  <Route path = {`/products/:product_id`} component = {ProductLayout} />
  <Route path = "/:id" render = {(props)=> <ProductListLayout {...props} />} />
  <Route exact path = "/" render = {()=> apiDataLoaded ? <HomeLayout data = {data}/> : <div>Loading...</div>}/>
</Switch>