Перейдите к новому URL-адресу из SPFX в Sharepoint Online

У меня есть раскрывающийся список в веб-части SPFX в sharepoint в Интернете. В этом раскрывающемся списке onchange я создаю URL-адрес с тегом #. Бывший. https: //sharepointonine/default.aspx#2349-234234-23434

Мне нужно перейти к этому новому URL-адресу. Я не знаю, как этого добиться. Я пытался:

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

Любая помощь?


sharepoint-online spfx
person user24826    schedule 13.03.2021    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете создать элемент 'a' и вызвать щелчок, чтобы открыть URL-адрес

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

это отлично работает.

Также вы можете использовать response-router, как описано здесь

Также есть ссылка для перенаправления:

import { Redirect } from 'react-router';

Когда вам нужно перенаправить на som url, вы делаете перенаправление:

<Redirect to={'/to url'}></Redirect>
person Maxim    schedule 15.03.2021
comment
Пробовал сейчас и то, и другое, не шла. Он будет перемещаться только в том случае, если URL-адрес является новым URL-адресом. Но если URL-адрес таков, что reloadUrl == window.location.href + # + selectedOption.key ;, он не перезагружается, URL-адрес отображается в адресной строке, но страница не перенаправляется на него снова. - person user24826; 15.03.2021
comment
Кажется, что window.location также работает, но только для нового URL-адреса страницы. Он не загружается для того же значения url + #. Поэтому я решил эту проблему, установив window.location.href, а затем вызвав window.location.reload. Но есть проблема. Если я нажимаю на элемент списка, то я вижу, что #value в url исчезает, после этого, когда я нажимаю на раскрывающийся список, даже если я устанавливаю значение window.location.href + # + и выполняю window.reload, он перезагружает только window.location, исключая значение #, что вызывает проблемы - person user24826; 15.03.2021
comment
Непонятно, почему вы пытаетесь работать с URL-адресом, а не с реактивным состоянием. SPO работает на React, а spfx использует React. Состояние контроля целесообразно использовать для навигации по любым данным в веб-части. Но вы можете использовать параметры URL-адреса в веб-части для навигации, например, между двумя веб-частями на разных страницах и передачи параметров между ними. - person Maxim; 15.03.2021
comment
Большое спасибо. Использование параметров URL-адреса сработало для window.location.href для перезагрузки той же страницы. Да, я понимаю, что вы говорите об использовании состояния и передаче данных между веб-частями. Сделаю это в следующий раз. Спасибо !!! - person user24826; 15.03.2021
comment
Если вы хотите связать две веб-части вместе на одной странице, вам следует использовать шаблон локатора служб, как описано здесь docs.microsoft.com/en-us/javascript/api/sp-core-library/ - person Maxim; 15.03.2021

arrow_upward
0
arrow_downward

Тестирую без SPFX фреймворка.

Результат теста: введите описание изображения здесь Тестовый код для справки:

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"]
          
        })
        
    
    
  }
person Amos    schedule 17.03.2021