React中ID不正确时如何重定向至错误页面？

核心思路 #

要实现ID不正确时的重定向，需明确两个关键点：

• 定义「不正确ID」的判定规则（比如ID为空、格式不合法，或不存在于合法房源ID列表中）
• 使用useEffect执行重定向逻辑，避免组件渲染阶段直接调用navigate导致的无限循环问题

具体实现代码 #

假设你有一份合法房源数据（比如本地JSON文件），以下是修改后的完整组件代码：

import React, { useEffect } from "react";
import PropTypes from "prop-types";
import card from "./card.scss";
import { useNavigate } from "react-router-dom";
// 导入合法房源数据（根据你的实际数据源调整路径）
import logementsData from "./data/logements.json";

function Card({ id, title, cover }) {
  const navigate = useNavigate();

  // 提取所有合法的房源ID
  const validIds = logementsData.map(item => item.id);

  useEffect(() => {
    // 校验ID的条件：ID为空 或 不在合法ID列表中
    if (!id || !validIds.includes(id)) {
      // 重定向到错误页面（建议配置专门的/error路由）
      navigate("/error", { replace: true });
    }
  }, [id, navigate, validIds]);
 
  return (
    <div style={card} className="logements">
      <p>{title}</p>
      <img
        src={cover}
        alt={`房源封面：${title}`}
        onClick={() => {
          // 点击时再次校验ID，避免无效跳转
          if (id && validIds.includes(id)) {
            navigate(`/Logement/${id}`);
          } else {
            navigate("/error", { replace: true });
          }
        }}
      />
    </div>
  );
}

Card.propTypes = {
  id: PropTypes.string.isRequired, // 改为必填，强制传入ID
  title: PropTypes.string.isRequired,
  cover: PropTypes.string.isRequired,
};

// 设置默认值（可选）
Card.defaultProps = {
  id: "",
  title: "",
  cover: ""
};

export default Card;

补充说明 #

1. 路由配置配合：需要在你的路由文件中添加错误页面的路由配置，同时处理未匹配的路由：

import { Routes, Route, Navigate } from "react-router-dom";
import ErrorPage from "./components/ErrorPage";
import Logement from "./components/Logement";
// 其他组件导入...

function App() {
  return (
    <Routes>
      {/* 其他路由 */}
      <Route path="/Logement/:id" element={<Logement />} />
      <Route path="/error" element={<ErrorPage />} />
      {/* 所有未匹配的路由重定向到错误页 */}
      <Route path="*" element={<Navigate to="/error" replace />} />
    </Routes>
  );
}

2. ID校验规则调整：如果你的合法ID不是来自本地数据，而是API接口，可以在组件中通过useEffect请求API校验ID的合法性，再执行重定向。

3. replace: true的作用：使用replace模式重定向，会替换当前历史记录，避免用户点击返回按钮时回到之前的错误页面，提升用户体验。

内容的提问来源于stack exchange，提问作者Carmen Adrien