SPFx: routing "history" does not exist on type 'Requireble<object>'

Question

I making routing in my SPFx, trying to change url parametrs.

import * as PropTypes from 'prop-types';

private EventListners(): void {
    const btnSearch = this.domElement.querySelector("#btnSearchQuerySubmit");
    const queryText: HTMLElement = <HTMLInputElement>this.domElement.querySelector("#txtInput");
    btnSearch.addEventListener('click', () => {
        (new SpFxSearchWebPart()).OnChangeEvent(queryText);
        let po =  PropTypes.object;
        po.history.push('/Title');
    });
}

And get the error: "history" does not exist on type 'Requireble'

Answer 1

It looks like you are trying to use the push method of the history object, which is used for navigating to a new URL in the browser's history stack, but the history object is not available in your code. The PropTypes.object object does not have a history property, so the push method is not accessible.

To navigate to a new URL in your SPFx web part, you can use the window.location.href property to change the current URL. For example:

window.location.href = '/Title';

Alternatively, you can use the @microsoft/sp-router library to navigate within your SPFx web part. To use this library, you will need to import the SPRouter object and call the navigate method:

import { SPRouter } from '@microsoft/sp-router';


SPRouter.navigate('/Title');

This will navigate to the new URL within your SPFx web part, without reloading the page.