当前位置：首页 > React

react列表详情如何跳转

2026-01-24 18:38:43React

React 列表跳转详情实现方法

使用 React Router 实现跳转

安装 React Router 依赖包：

npm install react-router-dom

在根组件中配置路由：

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import ListPage from './ListPage';
import DetailPage from './DetailPage';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<ListPage />} />
        <Route path="/detail/:id" element={<DetailPage />} />
      </Routes>
    </Router>
  );
}

列表项点击跳转

在列表组件中实现点击跳转：

import { useNavigate } from 'react-router-dom';

function ListItem({ item }) {
  const navigate = useNavigate();

  return (
    <div onClick={() => navigate(`/detail/${item.id}`)}>
      {item.name}
    </div>
  );
}

详情页获取参数

在详情页组件中获取路由参数：

import { useParams } from 'react-router-dom';

function DetailPage() {
  const { id } = useParams();

  // 根据 id 获取详情数据
  return <div>详情页 ID: {id}</div>;
}

使用 Link 组件跳转

另一种跳转方式是使用 Link 组件：

import { Link } from 'react-router-dom';

function ListItem({ item }) {
  return (
    <Link to={`/detail/${item.id}`}>
      {item.name}
    </Link>
  );
}

传递状态参数

跳转时可以传递状态参数：

navigate(`/detail/${item.id}`, { state: { fromList: true } });

在详情页获取状态：

react列表详情如何跳转

import { useLocation } from 'react-router-dom';

function DetailPage() {
  const location = useLocation();
  const { fromList } = location.state || {};
}