Navigate to new url from SPFX in Sharepoint online

Question

I have a dropdown in SPFX webpart in sharepoint online. In that dropdown, onchange, I am constructing a url with # tag. E.x. https://sharepointonine/default.aspx#2349-234234-23434

I need to navigate to this new url. I am not sure how to accomplish things. I have tried:

window.location = url //Gives error that string is not assignable to Location
window.location.href= url//does not reload the page
window.open(url, "_self")//does not reload the page
window.location.assign(url);//does not reload the page
 window.location.replace(url);//does not reload the page

Any help?

score 1 · Answer 1 · answered Mar 15 '21 at 05:15

1

You can create element 'a' and call click to open url

let a = document.createElement('a');
a.href = 'your link to open';
a.click();

this works fine.

Also you can use react-router, as describe here

There are also redirect link:

import { Redirect } from 'react-router';

When you need to redirect to som url, you render redirect:

<Redirect to={'/to url'}></Redirect>

answered Mar 15 '21 at 05:15

Maxim

854
1
8
16

I tried both now, it did not navigate. It will only navigate if the url is a new url. But if the url is such that, reloadUrl==window.location.href+"#"+selectedOption.key;, it does not reload, the url appears in the address bar, but the page is not redirected to it again. – user24826 Mar 15 '21 at 10:47
It seems window.location also works but only for new page url. It does not load for the same url + # value. So I resolved this by setting window.location.href and then calling window.location.reload. But there is an issue. If I click on a listitem, then I can see that the #value in url goes away, after that when I click on the dropdown, even if set the window.location.href+"#"+value, and do a window.reload, it only reloads window.location excluding the # value, causing issues – user24826 Mar 15 '21 at 10:59
It is not clear why you try to work with url, instead working with react-state. SPO working on React, and spfx using React. It is proper to use state of control to navigate any data in web part. But you can use url parameters in web part to navigate, for example, between two webparts on different pages and transmit parameters between them. – Maxim Mar 15 '21 at 11:52
Thanks a lot. Using url parameters worked for window.location.href to reload the same page. Yes I understand what you are saying about using state and passing data between webparts. Will do that next time. Thanks !!! – user24826 Mar 15 '21 at 16:16
If you want to link two web parts togeter on one page, you should use Service locator pattern, as describe here https://learn.microsoft.com/en-us/javascript/api/sp-core-library/servicescope?view=sp-typescript-latest – Maxim Mar 15 '21 at 16:21

score 0 · Answer 2 · answered Mar 17 '21 at 08:46

I test with no framework SPFX.

Test result: Test code for your reference:

public render(): void {

    this.domElement.innerHTML = `
      <div class="${styles.noframeworkSpfx}">
        <div class="${styles.container}">
          <div class="${styles.row}">
            <div class="${styles.column}">
              <span class="${styles.title}">Welcome to SharePoint!</span>
              <p class="${styles.subTitle}">Customize SharePoint experiences using Web Parts.</p>
              <p class="${styles.description}">${escape(this.properties.description)}</p>
              <a href="https://aka.ms/spfx" class="${styles.button}">
                <span class="${styles.label}">Learn more</span>
              </a>
              <select id="option" >
                <option value="test1">test1</option>
                <option value="test2">test2</option>
                <option value="test3">test3</option>
              </select>

            </div>
          </div>
        </div>
        
        </div>`;
        this.domElement.querySelector('#option').addEventListener('change', (e) => { 
          window.location.href="https://www.google.com/search?q="+e.target["value"]
          
        })
        
    
    
  }

Navigate to new url from SPFX in Sharepoint online

2 Answers2