尝试使用 reactJS 将查询字符串参数发送到另一个页面答案

【问题标题】：trying to send querystring parameters to another page using reactJS尝试使用 reactJS 将查询字符串参数发送到另一个页面
【发布时间】：2020-04-07 19:11:28
【问题描述】：

我正在尝试使用按钮单击事件中的历史对象将查询字符串参数发送到另一个页面，如下所示

const viewChange = (record) => {
debugger;
history.push('/Viewchange?id=record.id&dataid=record.dataid');
};

这是我在 routes.js 文件中定义的路线

{
  path: '/Viewchange/:id/:dataid',
  exact: true,
  title: 'Viewchange',
  icon: 'dashboard',
  breadcrumbs: ['dashboard'],
  contentComponent: ViewChangeRequest,
  isEnabled: () => false,
},

我如何得到一个带有下面网址的空页面

http://localhost:3000/Viewchange?id=record.id&dataid=record.dataid#

我不确定在这种情况下我做错了什么，谁能告诉我如何将查询字符串值附加到 url 下面的代码是我要重定向的组件

 const ViewChangeRequest = (props) => {
  };
  export default withRouter(ViewChangeRequest);

提前多谢

完整的 route.js 代码

   [
    {
      path: '/',
      exact: true,
      title: 'Dashboard',
      icon: 'dashboard',
      breadcrumbs: ['Dashboard'],
      contentComponent: UserDashboard,
      isEnabled: () => true,
    },
    {
      type: 'subMenu',
      title: 'Codes and Guidelines',
      children: [
        {
          path: '/LocalCodes',
          exact: true,
          title: 'Local Codes',
          icon: 'dashboard',
          breadcrumbs: ['Codes and Guidelines', 'Local Codes'],
          contentComponent: AddLocalCode,
          isEnabled: () => true,
        },
      ],
    },
    {
      type: 'subMenu',
      title: 'Design Criteria',
      children: [
        {
          path: '/Climate',
          exact: true,
          title: 'Climate',
          icon: 'dashboard',
          breadcrumbs: ['Design Criteria', 'Climate'],
          contentComponent: ContentClimate,
          isEnabled: () => true,
        },
      ],
    },
    {
      path: '/Viewchange/:id/:dataid',
      title: 'Viewchange',
      icon: 'dashboard',
      breadcrumbs: ['dashboard'],
      contentComponent: ViewChangeRequest,
      isEnabled: () => false,
    },
  ];

【问题讨论】：

标签： javascript reactjs react-router router

【解决方案1】：

您需要使用反引号字符 (template literals) 来动态构建您的 url。

history.push(`/Viewchange?id=${record.id}&dataid=${record.dataid}`);

【讨论】：

它正在重定向到页面，但它给出的空白页面带有这样的 url http://localhost:3000/Viewchange?id=34daf76e9e6043238bd1725a347af8d4&dataid=96a83572aec2425a8e8ee75afbf52bd3#
@EnigmaState 它与您的路线定义有关。你能添加你的 react-router-dom 路由定义吗？
@EnigmaState 这是您路线的配置文件吗？你如何使用它？你能补充一下这个问题吗？
让我们continue this discussion in chat.

【解决方案2】：

动态Urls的构造方法有两种：

使用字符串 - history.push('/Viewchange?id=' + record.id + '&dataid=' + record.dataid);
使用 Bactick -

history.push(`/Viewchange?id=${record.id}&dataid=${record.dataid}`);

【讨论】：