Question

我需要在我的react应用程序中获取当前网址，因为我们的front / nginx可能会使用重定向进行响应，如果用户激活了服务工作者，则重定向不会被点击。

因此，我目前在didMount的404组件中具有此逻辑。

fetch('/test/page/xxxx/', {redirect: 'follow'}).then(res => {
  if(res.status === 200 && res.redirected) {
    console.log(res)
    // this.props.push(res.url)
    // window.location.replace(res.url)
    // window.location.hash = res.url
    console.log('Redirected to ' + res.url)
  }
})

我在响应中返回的res.url是完整的URL，例如：https://example.net/xxx/xxx/xxxx，这使我很难使用react-router-redux的push，因为它期望相对的URL。有人可以通过正则表达式来帮助我吗，该正则表达式可以从res.url中获取子弹，或者有人有其他解决办法吗？

Answer 1

URL中有一个window接口^[1]，可用于创建URL对象。

URL对象具有pathname属性，该属性用于检索URL的路径部分。

this.props.push(
  new URL(res.url).pathname
)

Answer 2

获取路径名（相对URL）的最简单方法是使用URL interface API

进行解析。

const { pathname } = new URL("https://example.net/aaa/bbb/ccc");
console.log(pathname) // "/aaa/bbb/ccc"

在您的代码范围内

fetch("/test/page/xxxx/", { redirect: "follow" }).then(res => {
  if(res.status === 200 && res.redirected) {
    const { pathname } = new URL(res.url);
    this.props.push(pathname);
  }
});

注意：IE11及以下版本不支持。如果需要该浏览器的支持，则有一个polyfill https://github.com/lifaon74/url-polyfill

还有一个proposal要添加到babel中，预计不久将成为阶段0的功能

如何通过获取和重定向来解析URL而不用React刷新

2 个答案: