javascript - React Router v4 不使用/参数在路由中渲染组件

Question

我正在一个电子商务网站上做一个项目，目前在 "/" 的主页和在 "/:id"的产品列表页面设置了正确的路由。我正在尝试为单个产品页面设置路由，但是，react-router 根本不呈现我的组件。

索引.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>

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>