0

At the moment, I am trying to list projects on a website in a grid. Some of them link to another page on the site and others link to another domain page. At the moment I am using React-Router's 'Link' to go from one page to another, however this doesn't work when going to a page outside of the domain. In the JSON file, I check for the 'url' variable which returns either the URL if its public or 'project-page' if it is local. I can't figure out how to differentiate between the two in JSX; is there a work around while still utilizing the JSON file?

<div className="projects">
    {projectData.map((projectDetail, index) => {
        return(
            <div className='project-card'>
                <Link to={projectDetail.url}>
                    <img src={require('./images/icons/' + projectDetail.alt + '.jpg')} alt={projectDetail.title}/>
                    <h3>{projectDetail.title}</h3>
                    <p>{projectDetail.subtext}</p>
                </Link>
            </div>
        )
    })}
</div>
Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Skiddswarmik
  • 226
  • 1
  • 2
  • 14
  • This question has nothing to do with JSON. JSON is just how you store the data in the file. By the time you have `projectData`, you're in the realm of good ole arrays and objects. – Heretic Monkey May 22 '22 at 20:27

1 Answers1

1

Well, to differentiate you can check the content of the projectDetail.url you are retrieving from that JSON in your javascript file, if that matches your domain (your website - having a project-page as you mention) or is it an external domain. You can also set a flag value in your json file. For each project set a value (e.g externalUrl: 1 or 0) and then check if projectDetail.externalUrl is 1 (it contains an external link). Then, maybe try the following for external domains:

<Link to={{ pathname: "external URL" }} target="_blank" />

In your case:

<Link to={{ pathname: projectDetail.url }} target="_blank" />

See this answer for detailed information: React-Router External link

Edit 1

If Link does not work for external websites, this would probably be related to the version of react-router you are using. Actually, to navigate to external websites you can as well use anchort tags <a> to redirect. Check what URL your project has and then conditional render a <Link> or <a>.

<a href="www.example.com" target=_blank></a>
besjon_c
  • 170
  • 2
  • 12
  • Your link points to a question, not an answer. Did you mean https://stackoverflow.com/a/69544983/ ? – Heretic Monkey May 22 '22 at 20:34
  • Oh yes, sorry for that. :) – besjon_c May 22 '22 at 20:35
  • This is soo close to what I'm trying to do except the link adds to the end of the domain so it takes me to "localhost/work/https://www.example.com". Is there something i can add to this aswell? – Skiddswarmik May 25 '22 at 21:30
  • One option would be to use react Route directly: ` { window.location.href = 'https://example.com/'; return null;}}/>` – besjon_c May 25 '22 at 21:35
  • 1
    Secondly, I guess why is not working is depending on the version of `react-router` you are using, but you can also use `anchor` links directly to redirect to an external website, as you don't need to use react-router to navigate to an external website. `Policies`. You can check if the url is external or not and then render conditionally `Link` or `` – besjon_c May 25 '22 at 21:38
  • 1
    Using an if statement to differentiate between anchor or Link works wonders, thank you!! – Skiddswarmik May 25 '22 at 22:33