trying to send querystring parameters to another page using reactJS

Question

I am trying to send querystring parameters to another page using history object in the button click event like as below

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

and this is route where i have defined in routes.js file

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

some how i am getting an empty page with url below

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

I am not sure where i am doing wrong in this case, Could any one please let me know how to attach querystring values to url the below code is the component which i am going to redirect

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

many thanks in advance

complete route.js code

   [
    {
      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,
    },
  ];

SuleymanSah · Accepted Answer · 2019-12-14 18:21:40Z

1

You need to use backtick character (template literals) to dynamically construct your url.

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

edited Dec 14, 2019 at 18:21

answered Dec 14, 2019 at 18:02

SuleymanSah

18k6 gold badges38 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Glory Raj Over a year ago

it is redirecting to the page but it is giving blank page with the url like this http://localhost:3000/Viewchange?id=34daf76e9e6043238bd1725a347af8d4&dataid=96a83572aec2425a8e8ee75afbf52bd3#

SuleymanSah Over a year ago

@EnigmaState it is related with your route definitions. Can you add your react-router-dom route definitions?

SuleymanSah Over a year ago

@EnigmaState is this a configuration file for your routes? How do you use it? Can you add to the question?

SuleymanSah Over a year ago

Let us continue this discussion in chat.

Arcot Deepika · Accepted Answer · 2019-12-14 18:26:29Z

0

There are two ways to construct dynamic Urls:

Using Strings - history.push('/Viewchange?id=' + record.id + '&dataid=' + record.dataid);
Using Bactick -

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

edited Dec 14, 2019 at 18:26

answered Dec 14, 2019 at 18:19

Arcot Deepika

4494 silver badges17 bronze badges

Collectives™ on Stack Overflow

trying to send querystring parameters to another page using reactJS

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related