从在线 Sharepoint 中的 SPFX 导航到新网址答案

【问题标题】：Navigate to new url from SPFX in Sharepoint online从在线 Sharepoint 中的 SPFX 导航到新网址
【发布时间】：2023-03-16 15:06:01
【问题描述】：

我在在线共享点的 SPFX webpart 中有一个下拉菜单。在那个下拉菜单中，onchange，我正在构建一个带有# 标签的 url。前任。 https://sharepointonine/default.aspx#2349-234234-23434

我需要导航到这个新网址。我不确定如何完成事情。我试过了：

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

【解决方案1】：

您可以创建元素“a”并调用点击打开网址

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

这很好用。

你也可以使用 react-router，描述 here

还有重定向链接：

import { Redirect } from 'react-router';

当你需要重定向到 som url 时，你会渲染重定向：

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

【讨论】：

我现在都试过了，它没有导航。它只会在 url 是新 url 时导航。但是如果url是这样的，reloadUrl==window.location.href+"#"+selectedOption.key;，它不会重新加载，url出现在地址栏中，但页面不会再次重定向到它。跨度>
看来 window.location 也适用，但仅适用于新页面 url。它不会为相同的 url + # 值加载。所以我通过设置window.location.href然后调用window.location.reload来解决这个问题。但是有一个问题。如果我点击一个列表项，那么我可以看到 url 中的#value 消失了，之后当我点击下拉列表时，即使设置了 window.location.href+"#"+value，然后执行 window.reload ，它只重新加载 window.location 不包括 # 值，导致问题
不清楚为什么您尝试使用 url，而不是使用 react-state。 SPO 致力于 React，而 spfx 则使用 React。使用控制状态来导航 Web 部件中的任何数据是正确的。但是你可以在web part中使用url参数进行导航，例如在不同页面的两个webpart之间进行导航，并在它们之间传递参数。
非常感谢。使用 url 参数可用于 window.location.href 重新加载同一页面。是的，我理解您所说的使用状态和在 web 部件之间传递数据的内容。下次会这样做。谢谢！！！
如果你想在一个页面上链接两个 Web 部件，你应该使用服务定位器模式，如这里所述docs.microsoft.com/en-us/javascript/api/sp-core-library/…

【解决方案2】：

我在没有框架 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"]
          
        })
        
    
    
  }

【讨论】：