How do I redirect to an External Link in react?

user_14799165 0
Viewed 6430

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

enter image description here

enter image description here

reactjs components redirect hyperlink url
3 Answers

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

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

user_86908570

The disconnect is between the GalleryContainer and Image components. In order to access data from the <Link to=...> within the next component, you need to use props.location.propertyName.

So for example, your GalleryContainer needs to link like this:

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

And then the value can be retrieved inside the Image component like so:

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

You can use

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

but then you would have to access it in the linked component like this: props.location.state.url

From there, you can use an <a> tag with an href to link to the src property.

user_67589640

You can simply use a tag to redirect.

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

Remove target attribute if you dont need to open in new tab.

user_137536820
Related