如何在反应中重定向到外部链接? [英] How do I redirect to an External Link in react?

问题描述

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

解决方案

问题

1. 我不知道为什么，但您似乎没有在您的应用中始终如一地使用 Link 组件；当使用锚 (

   I am building a gallery where you click on the image and it will load in a separate component using props, this image is a URL, taken from an array, where the src property is loaded as a background image via CSS. My challenge is connecting the src data to the child component. See original question

   I have found a solution to pass the data using the Link component. Now the URL string is being read like this: http://localhost:3000/https://photos.smugmug.com/photos.... As you can see there is an address within the address in the string.

   I have tried changing the state of the URL string but did not work.

   My question, how do I write a redirect to fix the HTTP address removing the localhost address

   UPDATE Many thanks to Taylor, Drew, and Ajeet for all of your help! The solution is posted below, the main issue was I needed a function in the Image component to connect the src props from the GalleryContainer component. I also changed all "a tags" to "Link components" to keep consistency. More details are in the explained solutions from Drew and Taylor, and also Ajeet code box here

   解决方案

   Issues

   1. I don't know why but you don't seem to use Link components consistently in your app; when using anchor (<a>) tags these types of links will reload the page and your app. A similar issue occurs when you manually set the window.location.href.
   2. The Image wasn't correctly accessing the passed route state.

   Solution

   App

   Reorder your routes from more specific to least specific, and remove the link from within the Switch component, only Route and Redirect components are valid children.

   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 component to enter the gallery.

   import { Link } from "react-router-dom";
   
   ...
   
   <Link to="/gallery">
     <h4>Click Here to Enter Gallery!</h4>
   </Link>
   

   GallerayList

   Use Link component for the link back home.

   import { Link } from "react-router-dom";
   
   ...
   
   <Link to="/">Home</Link>
   

   GalleryContainer

   Refer to image source consistently, i.e. src. Pass along also the image id in route state, using a 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/Public/Image

   Use a Link for the link back to the gallery. Use the useLocation hook to access the passed route state.

   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

   It isn't clear what your plan is for this component and clicking on the div rendering the passed image as a background so just remove the window.location.href logic with history.push if you want to navigate elsewhere. You can access the history object via the useHistory React hook.

   Demo

   这篇关于如何在反应中重定向到外部链接?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！