React Router Dom 命中错误的端点

Posted 2023-02-22

【中文标题】React Router Dom 命中错误的端点

【英文标题】：React Router Dom hitting wrong endpoint

【发布时间】：2021-08-20 04:57:42

【问题描述】：

我有一个 redux 操作，每当网站上的用户尝试更改他们的个人资料时就会触发该操作。它是通过我使用 Mosh 的教程编写的 api 调用中间件来实现的。

export const updateUserProfile =
  ( id, name, email, favouriteThing, password, confirmPassword , headers) =>
  (dispatch) => 
    dispatch(
      apiCallBegan(
        url: `api/users/profile`,
        data:  id, name, email, favouriteThing, password, confirmPassword ,
        headers,
        method: 'put',
        onStart: userUpdateRequested.type,
        onSuccess: userUpdateReceived.type,
        onError: userUpdateFailed.type,
      )
    );
  ;

应用路由是这样的：

          <Route path='/profile' render=ProfileScreen exact />
          <Route path='/profile/page/:pageNumber' render=ProfileScreen exact/>

我在个人资料页面路由上有页面，因为我有一个 React 组件，它显示用户在表中创建的所有项目，并且我需要该表来处理多个页面。我不知道如何在不更改整个页面的情况下更改页面中的单个组件，所以我让它整个页面都更改。

端点是这样的：

router
  .route('/profile')
  .put(protect, updateUserProfile);

我使用如下所示的提交处理程序提交新数据：

  const submitHandler = (e) => 
    e.preventDefault();
    if (password !== confirmPassword) 
      setMessage('Passwords do not match');
     else 
      dispatch(updateUserProfile(data, headers));
    
  ;

当我在这个 URL 时，这一切都很好：http://localhost:3000/profile

当我转到配置文件的第 2 页时，这是 URL：http://localhost:3000/profile/page/2，我收到以下错误：

404 Not Found试图访问/profile/page/api/users/profile

我在触发 submitHandler 时记录了 location.pathname 并且我得到了看起来正确的“/profile”。 但是，当我在快速错误中间件中记录 req.originalURL 时，我得到 /profile/page/api/users/profile

因此，在前端调用函数和后端接收函数之间的原始 URL 发生了变化。

无论我在个人资料的哪个页面上，是否都将 req.originalURL 保留在“/profile”？我曾尝试在 React Router Dom 中使用 Switch 组件并将配置文件页面路由的位置设置为“/profile”，但这会破坏配置文件页面路由，并且当您单击下一页时，配置文件页面根本不会加载。

我在应用程序中进行了很多谷歌搜索和测试，但我似乎什么都想不出来，这让我觉得我对这里发生的事情有一个根本的误解。如果有人有任何想法，我将非常感谢您的帮助。

【参考方案1】：

事实证明，这是一个非常简单的修复，有人在另一个网站上向我指出。我想我会在这里分享它。

请求中的url开头需要有一个正斜杠，否则解释为相对路径。

url: `/api/users/profile`