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中路由的顺序只是解决方案的一部分。我还将我的路线从清单组件移动到路线顺序顶部的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

删除开关并在 ProductListLayout 组件

中使用div

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>
  );
}

Click here for more detail

Answer 2

您只需更改当前路线的位置......

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

React Router v4不在路由中呈现组件w /参数

2 个答案: