时间戳

首页 > 解决方案 > 使用 React Router 访问特定 URL

reactjs - 使用 React Router 访问特定 URL

问题描述

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

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

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

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

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

package.json 中的当前反应依赖项：

"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}')，但如果可能的话，我最好不想这样做。再次感谢！

标签： reactjsreact-router

解决方案

在澄清的基础上对此进行了修订。

答案应该是；

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这将是要走的路。

推荐阅读