使用 React Router 访问特定 URL答案

【问题标题】：Going to specific URL using React Router使用 React Router 访问特定 URL
【发布时间】：2020-07-08 11:10:14
【问题描述】：

我正在尝试使用 React Router 转到我的应用程序上显示用户信息的特定页面。我所有的 React 路由都存储在一个单独的文件中并像这样导出：

export const USERS = "/users/:userId";

我想要做的是调用这条路线，我可以将它导入我的应用程序。但是，我希望能够指定特定的userId 去。对此的任何帮助将不胜感激。

我使用import * as ROUTES from "../../constants/routes"; 导入我的路线。然后可以致电ROUTES.USERS 访问该特定路线。我只需要能够传递userId 对象。

我设置了一个页面，可以从路由参数中获取userId，然后加载用户信息。

package.json 中的当前 react 依赖项：

"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.1",

编辑

添加有关我的问题的更多详细信息...
所以我有一张桌子，里面有几行用户。当我单击用户时，我想查看包含这些详细信息的页面。我可以正确地从表格行中获取userId，但我的问题是如何将这个userId 放入路由器中。目前，我为要访问的 URL (export const USERS = "/users/:userId")) 存储了一个变量。然后在我的 JS 中，我有如下内容：

props.history.push(ROUTES.USERS);

我想知道如何将userId 变量修改为这个常量（如果可能的话）。我知道在用户特定页面上将其从 URL 中取出的方法。我想我可以做props.history.push('users/${userId}')，但如果可能的话，我最好不想这样做。再次感谢！

【问题讨论】：

我认为你想要做的只是需要你将 userId 添加到链接的末尾，如果使用链接，那么：然后在链接页面上，获取id：ownProps.match.params.userId;
您好，感谢您的回复马克。这不是我正在寻找的答案。我会在上面详细说明。我明白你的意思，但理想情况下，如果可能的话，我只想能够将此 userId 传递给 ROUTES.USERS 常量。
你试过了吗？ props.history.push(${window.location.pathname}/${userId})
嘿@codingwithmanny，谢谢。我对使用window.location 有点担心，因为我们一直被教导不要使用它。特别是因为这是一个 React 应用程序，它对我来说似乎不合适。不过我可能是错的。我可以使用：props.history.push(`users/${userId}`) 进行硬编码，但这不是我理想的解决方案。
如果您想要基本信息，这可能是您的最佳选择。使用 React 路由器，如果您控制台记录 props.match，您会看到此数据不存在，但如果您打算使用 window.location.pathname，这可能是故意的。除非有一个特定的用例阻止你使用它，否则它可能是要走的路。

标签： reactjs react-router

【解决方案1】：

根据澄清对此进行了修订。

答案应该是；

props.history.push(`${window.location.pathname}/${userId}`);

如果你console.log(props.match);

您从 React Router 获得以下数据：

{
  "path": "/users/:id",
  "url": "/users/7",
  "isExact": true,
  "params": {
    "id": "7"
  }
}

从技术上讲，您可以在最后做一个 str 替换，但如果 id 更长或发生变化，那将不理想。

在大多数情况下，window.location.pathname 是最好的选择。

【讨论】：