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

Question

Я делаю проект на сайте электронной коммерции, и в настоящее время правильные маршруты настроены для домашней страницы на "/" и для страницы списка продуктов на "/:id". Я пытаюсь настроить маршрут для одной страницы продукта, однако React-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 вверху порядка маршрутов, и теперь он работает!

Новое приложение.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>

Answer 1

вам нужно изменить только позицию на ваших текущих маршрутах ...

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

Answer 2

Снимите переключатель и используйте div внутри ProductListLayout component

ProductListLayout.js

const ProductListLayout = () => {
  return (
    <div>
      <div className="product-list-item-card">
        <div className="product-list-item-img"></div>
        <div className="product-list-item-content">
          <div className="product-list-item-overlay">
            <Link to={`/products/${99999}`}>
              Click here
            </Link>
          </div>
          <h3>{name}</h3>
        </div>
      </div>
      <Route exact path={`/products/:product_id`} render={()=> <div>Product Page</div>}/>
    </div>
  );
}

Нажмите здесь для получения более подробной информации