React Router Dom中如何检测URL是否包含指定片段（如id参数）

实现步骤 #

1. 调整路由配置

首先把匹配User组件的路由路径调整为可选id参数，React Router v5/v6 都支持在参数后加?表示可选，示例路由配置：

// React Router v6 示例
<Route path="/user/:id?" element={<User />} />

配置完成后，访问/user（新增场景，无id）和/user/123（编辑场景，有id）都会命中User组件。

2. 调整组件逻辑

你代码中已经通过useParams()获取了id参数，当URL中无id片段时，id的值为undefined，直接判断其是否存在即可替换原来的method判断逻辑，同时给props解构加兜底默认值避免新增场景下的报错：

const User = (props) => {
  // 加兜底默认值，避免新增场景下props.location.user不存在导致解构报错
  const { 
    name = '', 
    email = '', 
    status = 'active', 
    gender = '', 
    title = ''
  } = props.location?.user || {};

  const { id } = useParams();

  const [newName, setNewName] = useState(name);
  const [newEmail, setNewEmail] = useState(email);
  const [newStatus, setNewStatus] = useState(status);
  const [newGender, setNewGender] = useState(gender);

  const updateName = (e) => {
    setNewName(e.target.value);
  };

  const updateEmail = (e) => {
    setNewEmail(e.target.value);
  };

  const updateStatus = (e) => {
    setNewStatus(e.target.value);
  };

  const updateGender = (e) => {
    setNewGender(e.target.value);
  };

  const updateData = () => {
    // 替换原来的method判断，直接判断id是否存在
    if (id) {
      // 有id走put更新逻辑
      axios
        .put(
          `${process.env.REACT_APP_API_URL}users/${id}`,
          {
            name: newName,
            email: newEmail,
            status: newStatus,
            gender: newGender,
          },
          {
            headers: {
              Authorization: `Bearer ${process.env.REACT_APP_API_TOKEN}`,
            },
          }
        )
        .catch(function (error) {
          if (error.response.status === 422) {
            alert(
              "Error: The format of email is wrong! Please put it like this: yourname@yourname.com"
            );
          }
        });
    } else {
      // 无id走post新增逻辑
      axios
        .post(
          `${process.env.REACT_APP_API_URL}users/`,
          {
            name: newName,
            email: newEmail,
            status: newStatus,
            gender: newGender,
          },
          {
            headers: {
              Authorization: `Bearer ${process.env.REACT_APP_API_TOKEN}`,
            },
          }
        )
        .catch(function (error) {
          if (error.response.status === 422) {
            alert("Error: Name or email already taken!");
          }
        });
    }
  };

补充说明

如果需要严格校验id的有效性，可额外加/^\d+$/.test(id)的正则判断，避免URL传入非数字id的异常场景。

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