问题描述:
使用react路由器按id筛选项返回空数组
回答:
在React开发中,使用路由器按id筛选项返回空数组可以通过以下步骤实现:
npm install react-router-dom
import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Home from './Home';
import ItemList from './ItemList';
import ItemDetail from './ItemDetail';
function App() {
return (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/items" component={ItemList} />
<Route path="/items/:id" component={ItemDetail} />
</Switch>
</Router>
);
}
export default App;
在上面的代码中,我们使用react-router-dom
库中的BrowserRouter
作为根路由器,并使用Switch
组件来确保只有一个路由被渲染。我们定义了三个路由:"/"
对应Home
组件,"/items"
对应ItemList
组件,"/items/:id"
对应ItemDetail
组件。其中":id"
表示路径中的参数。
import React from 'react';
function ItemList() {
// 根据筛选条件获取空数组
const filteredItems = [];
return (
<div>
<h2>Item List</h2>
{filteredItems.length === 0 ? (
<p>No items found.</p>
) : (
<ul>
{filteredItems.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</ul>
)}
</div>
);
}
export default ItemList;
import React from 'react';
import { useParams } from 'react-router-dom';
function ItemDetail() {
const { id } = useParams();
// 根据id获取对应的项,这里假设返回的是空数组
const item = [];
return (
<div>
<h2>Item Detail</h2>
{item.length === 0 ? (
<p>Item not found.</p>
) : (
<div>
<h3>{item.name}</h3>
<p>{item.description}</p>
</div>
)}
</div>
);
}
export default ItemDetail;
在上面的代码中,我们通过useParams
钩子从URL中获取id
参数,并使用它来获取对应的项。根据筛选条件,我们模拟返回了一个空数组。
react-router-dom
库提供的Link
组件进行页面之间的导航。例如,在ItemList组件中可以添加以下代码:import React from 'react';
import { Link } from 'react-router-dom';
function ItemList() {
// ...
return (
<div>
<h2>Item List</h2>
{filteredItems.length === 0 ? (
<p>No items found.</p>
) : (
<ul>
{filteredItems.map((item) => (
<li key={item.id}>
<Link to={`/items/${item.id}`}>{item.name}</Link>
</li>
))}
</ul>
)}
</div>
);
}
export default ItemList;
在上面的代码中,我们在列表项中使用Link
组件来生成带有正确路径的链接。当用户点击链接时,路由器会自动渲染ItemDetail
组件,并传递相应的id参数。
这样,当使用路由器按id筛选项返回空数组时,用户将看到对应的空数组提示或者未找到项的提示。
腾讯云相关产品和产品介绍链接地址:
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云