如何在 React 中重定向到外部 Link？

Question

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

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

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

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

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

Answer 1

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

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

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

Answer 2

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

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

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

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

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

您可以使用

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

但是您必须像这样在 linked 组件中访问它：props.location.state.url

从那里，您可以使用带有 href 的 <a> 标签到 link 到 src 属性.

Answer 3

问题

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

解决方案

应用程序

将您的路由从更具体到最不具体重新排序，并从 Switch 组件中删除 link，只有 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 回家使用 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/Public/Image

使用 Link 返回画廊 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/Image容器

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

如何在 React 中重定向到外部 Link？

How do I redirect to an External Link in react?

url

redirect

components

hyperlink

reactjs

问题

解决方案

演示