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>