【问题标题】：How do I redirect to an External Link in react?如何在反应中重定向到外部链接？
【发布时间】：2021-08-23 02:24:09
【问题描述】：

我正在构建一个图库，您在其中单击图像，它将使用道具加载到单独的组件中，该图像是一个 URL，取自数组，其中 src 属性通过 CSS 作为背景图像加载。我的挑战是将 src 数据连接到子组件。 See original question

我找到了使用 Link 组件传递数据的解决方案。现在 URL 字符串的读取方式如下：http://localhost:3000/https://photos.smugmug.com/photos.... 如您所见，字符串中的地址中有一个地址。

我已尝试更改 URL 字符串的状态，但没有成功。

我的问题，如何编写重定向来修复 HTTP 地址删除本地主机地址

更新非常感谢 Taylor、Drew 和 Ajeet 的帮助！解决方案发布在下面，主要问题是我需要 Image 组件中的一个函数来连接 GalleryContainer 组件中的 src 道具。我还将所有“a 标签”更改为“链接组件”以保持一致性。更多细节在 Drew 和 Taylor 解释的解决方案中，还有 Ajeet 代码框here

【问题讨论】：

你好朱莉，你是在问如何去掉http://localhost:3000/https://photos.smugmug.com/photos.... 的http://localhost:3000/“前缀”，只得到https://photos.smugmug.com/photos....？
@DrewReese 是的，我想删除前缀 .. 看起来您无法使用链接重定向到外部 URL
@AjeetShah 为什么我可以重定向到外部 URL 是有道理的，我会尝试更改为 html 标签
@AjeetShah 这里是链接：codesandbox.io/s/young-smoke-h68x8?file=/src/Public/Home.js
@Julie this 是否按您的需要工作？

标签： reactjs url redirect hyperlink components

【解决方案1】：

问题

我不知道为什么，但您似乎并没有在您的应用程序中始终如一地使用Link 组件；当使用锚 (<a>) 标签时，这些类型的链接将重新加载页面和您的应用程序。当您手动设置 window.location.href 时会出现类似问题。
Image 未正确访问传递的路由状态。

解决方案

应用程序

将您的路线从更具体到最不具体重新排序，并从Switch 组件中删除链接，只有Route 和Redirect 组件是有效的子组件。

function App(props) {
  return (
    <>
      <Router>
        <Switch>
          <Route path="/gallery" component={GalleryList} />
          <Route path="/image" component={Image} />
          <Route path="/" component={Home} />
        </Switch>
      </Router>
    </>
  );
}

首页

使用Link组件进入图库。

import { Link } from "react-router-dom";

...

<Link to="/gallery">
  <h4>Click Here to Enter Gallery!</h4>
</Link>

画廊列表

使用Link 组件作为主页链接。

import { Link } from "react-router-dom";

...

<Link to="/">Home</Link>

画廊容器

一致地引用图像源，即src。使用Link 传递路径状态下的图像id。

const GalleryConatiner = (props) => {
  return (
    // generates the gallery list!
    <ul>
      <li className={styles["gallery-list"]}>
        <Link
          to={{ pathname: "/image", state: { id: props.id, src: props.src } }}
        >
          <div
            className={styles["div-gallery"]}
            style={{
              backgroundImage: `url(${props.src})`,
              height: 250,
              backgroundSize: "cover"
            }}
          ></div>
        </Link>
      </li>
    </ul>
  );
};

src/公共/图像

使用Link 作为返回画廊的链接。使用useLocation 钩子访问通过的路由状态。

import { Link, useLocation } from 'react-router-dom';

const Image = (props) => {
  const { state: { id, src } = {} } = useLocation();
  return (
    <section>
      <h1 className={styles["h1-wrapper"]}>Image :{id}</h1>
      <div className={styles.wrapper}>
        <Link to="/gallery">BACK TO GALLERY</Link>
        <ImageContainer id={id} key={id} src={src} />
      </div>
    </section>
  );
};

src/Public/ImageContainer

不清楚您对该组件的计划是什么并单击div 将传递的图像渲染为背景，因此如果您想导航到其他地方，只需使用history.push 删除window.location.href 逻辑。您可以通过 useHistory React 挂钩访问 history 对象。

演示

【讨论】：

【解决方案2】：

GalleryContainer 和 Image 组件之间断开连接。为了在下一个组件中访问来自<Link to=...> 的数据，您需要使用props.location.propertyName。

例如，您的 GalleryContainer 需要像这样链接：

<Link to={{ pathname: "/image", src: props.src }}>

然后可以像这样在 Image 组件中检索该值：

<ImageContainer id={props.id} key={props.id} src={props.location.src} />

你可以使用

<Link to={{ pathname: "/image", state: { url: props.src } }}>

但是你必须像这样在链接的组件中访问它：props.location.state.url

从那里，您可以使用带有 href 的 <a> 标记链接到 src 属性。

【讨论】：

【解决方案3】：

您可以简单地使用 a 标签进行重定向。

<a target='_blank' href={}>
        Link
</a>

如果您不需要在新标签中打开，请删除目标属性。

【讨论】：