react列表详情如何跳转
路由配置
使用react-router-dom库配置路由，在根组件中定义列表页和详情页的路由规则。列表页路径通常为/list，详情页路径为/detail/:id（动态参数传递）。
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import ListPage from './ListPage';
import DetailPage from './DetailPage';
function App() {
return (
<Router>
<Routes>
<Route path="/list" element={<ListPage />} />
<Route path="/detail/:id" element={<DetailPage />} />
</Routes>
</Router>
);
}列表项点击事件
在列表组件中，为每个列表项绑定点击事件，通过useNavigate钩子跳转至详情页，并携带对应的ID参数。
import { useNavigate } from 'react-router-dom';
function ListPage() {
const navigate = useNavigate();
const items = [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }];
return (
<ul>
{items.map(item => (
<li
key={item.id}
onClick={() => navigate(`/detail/${item.id}`)}
>
{item.name}
</li>
))}
</ul>
);
}详情页数据获取
在详情页组件中，通过useParams钩子获取URL中的ID参数，并根据ID加载对应的详情数据。
import { useParams } from 'react-router-dom';
function DetailPage() {
const { id } = useParams();
const [detail, setDetail] = useState(null);
useEffect(() => {
fetch(`/api/details/${id}`)
.then(res => res.json())
.then(data => setDetail(data));
}, [id]);
return (
<div>
{detail ? <h1>{detail.title}</h1> : <p>Loading...</p>}
</div>
);
}状态管理（可选）
若需在跳转时传递复杂数据而非仅ID，可通过state参数传递。列表页点击时添加状态：
navigate(`/detail/${item.id}`, { state: { itemData: item } });详情页通过useLocation获取状态：
import { useLocation } from 'react-router-dom';
function DetailPage() {
const { state } = useLocation();
const itemData = state?.itemData;
}返回按钮处理
在详情页添加返回按钮，通过navigate(-1)返回列表页。
<button onClick={() => navigate(-1)}>Back to List</button>
