我正在构建一个画廊，您单击图像，它将使用 props 加载到单独的组件中，该图像是一个 URL，取自数组，其中 src 属性通过 CSS 作为背景图像加载。我的挑战是将 src 数据连接到子组件。查看原始问题 https://stackoverflow.com/questions/67831464/having-a-problem-loading-in-data-to-child-component-in-react/67843144#67843144

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

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

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

UPDATE非常感谢 Taylor、Drew 和 Ajeet 的帮助！ 解决方案发布在下面，主要问题是我需要 Image 组件中的一个函数来连接 GalleryContainer 组件中的 src 属性。 我还将所有“a 标签”更改为“链接组件”以保持一致性。更多详细信息请参见 Drew 和 Taylor 的解释解决方案以及 Ajeet 代码框here https://codesandbox.io/s/patient-browser-3mqjj?file=/src/Public/UI/ImageContainer.js

Issues

1. 我不知道为什么，但你似乎不使用Link组件在您的应用程序中保持一致；当使用锚点时（<a>）标记这些类型的链接将重新加载页面和您的应用程序。手动设置时也会出现类似的问题window.location.href.
2. The Image没有正确访问通过的路由状态。

Solution

App

将您的路线从更具体到最不具体重新排序，并从Switch组件，仅Route and Redirect组件是有效的子组件。

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

Home

Use Link组件进入图库。

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

...

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

图库列表

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

src/公共/图像

Use a 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将传递的图像渲染为背景，因此只需删除window.location.href逻辑与history.push如果您想导航到其他地方。您可以访问history对象通过useHistory反应钩子。

Demo