I'm rebuilding a SP 2013-era EditForm.aspx web part using SPFx & React.

I would appreciate advice on how to get the query string into a SPFx web part.

I don't see any methods in the SharePoint Framework Reference; I apologize if I missed something.

I'm using React - its documentation leads to React-router, which seems overkill for just getting an item id, not to mention the struggle of changing the components at the root of the SPFx web part.

I've reviewed the PNP-JS-Core, and didn't find any help there either.

How are other people doing this?

  • 2
    Why not simply use pure JS to get the query string parameters from window.location.href? Or even simpler with window.location.search which gives you only the query string, but it is not supported below IE11 and some other old browser versions. – Mihail-Florin Popa Apr 28 '17 at 13:54

spfx has some utility classes to help. start by

import {  UrlQueryParameterCollection } from '@microsoft/sp-core-library';

Then in your onRender:

 var queryParameters = new UrlQueryParameterCollection(window.location.href);
    if (this.properties.mode !== modes.NEW) {
      if (queryParameters.getValue("Id")) {
        const id: number = parseInt(queryParameters.getValue("Id"));
        let fields = "*,ParentTR/Title,Requestor/Title";
        // get the requested tr
        pnp.sp.web.lists.getByTitle("Technical Requests").items.getById(id).expand("ParentTR,Requestor").select(fields).inBatch(batch).get()
          .then((item) => {

I create a 'mode' property on the property pane to specify if the form is in new, edit or display mode. Throw an error if no id is specified in display or edit mode. this example uses pnp-js-core.


  • 1
    'UrlQueryParameterCollection' is deprecated. Use the URLSearchParams browser API instead. – Raf Sep 28 '20 at 10:21

Thanks Mihail!

I copied Waldek's getLatestItemId method and added in the window.location.

I'm not going to pretend I know how Promises work, especially in TypeScript, but so far so good.

If the query string doesn't happen to have a number, then it returns a nice message saying to call me.

private getListItemId(): Promise<number> {
    let strLocationSearch: string = window.location.search.split("id=")[1];
    let numLocationSearch: number = parseInt(strLocationSearch);
    return new Promise<number>((resolve: (itemId: number) => void, reject: (error: any) => void): void => {
                headers: {
                    'Accept': 'application/json;odata=nometadata',
                    'odata-version': ''
            .then((response: SPHttpClientResponse): Promise<{ Id: number }> => {
                return response.json();
            }, (error: any): void => {
            .then((response: { Id: number }): void => {
                if (response.Id === numLocationSearch) {
                else {

As UrlQueryParameterCollection is deprecated, I suggest to use the URLSearchParams browser API instead.

Here is my code to get value of search parameter:

const url = new URL(window.location.href);
const params = new URLSearchParams(url.search);
let searchParam: string;
params.has('search') ? searchParam = params.get("search") : searchParam = "";

Here is my code to delete search parameter and update URL:

const url = new URL(window.location.href);
const params = new URLSearchParams(url.search);
if (params.has('search')) {
  window.history.replaceState({}, '', `${location.pathname}?${params}`);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.