gpt4 book ai didi

reactjs - 如何在 React 中重定向到外部链接?

转载 作者:行者123 更新时间:2023-12-05 03:41:14 31 4
gpt4 key购买 nike

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

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

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

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

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

enter image description here

enter image description here

最佳答案

问题

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

解决方案

应用

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

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 .也传递图像 id在路由状态下,使用 Link .

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>
);
};

来源/公开/图片

使用 Link返回画廊的链接。使用 useLocation钩子(Hook)访问传递的路由状态。

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>
);
};

源/公共(public)/ImageContainer

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

演示

Edit how-do-i-redirect-to-an-external-link-in-react

关于reactjs - 如何在 React 中重定向到外部链接?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67847263/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com