React Router Dom遇到错误的端点

Question

我有一个redux操作，每当网站上的用户试图更改他们的配置文件时，它就会触发。它通过一个api调用中间件来实现这一点，我使用Mosh的教程编写了这个中间件。

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找不到试图访问/profile/page/api/users/profile

当submitHandler被触发时，我记录了location.pathname，并且我得到了显示正确的"/profile"。然而，当我在express中的错误中间件上记录req.originalURL时，我得到/profile/page/api/users/profile

因此，在前端调用函数的时间和后端接收函数的方式之间，有些事情正在改变原始URL。

无论我在配置文件的哪个页面上，都有没有将req.originalURL保持在"/profile"？我曾尝试使用React Router Dom中的Switch组件，并将配置文件页面路由的位置设置为"/profile"，但这会中断配置文件页面的路由，当您单击下一页时，配置文件页面根本不会加载。

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

Answer 1

原来这是一个非常简单的修复，有人在另一个网站上向我指出了这一点。我想在这里分享一下。

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

url: `/api/users/profile`