在循环数据时尝试在本地和 public 网页之间切换

Question

目前，我正在尝试在网格中列出网站上的项目。其中一些 link 到站点上的另一个页面，其他 link 到另一个域页面。目前我正在使用 React-Router 的 'Link' 从一个页面转到另一个页面，但是当转到域外的页面时这不起作用。在 JSON 文件中，我检查 'url' 变量，其中 returns 如果是 public 则为 URL，如果是本地变量则为 'project-page'。我不知道如何在 JSX 中区分两者；在仍然使用 JSON 文件的同时是否有解决方法？

<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>

Answer 1

好吧，为了区分您可以检查 projectDetail.url 您从 javascript 文件中的 JSON 检索的内容，如果与您的域匹配（您的网站 - 有a project-page 正如你提到的）或者它是一个外部域。您还可以在 json 文件中设置标志值。为每个项目设置一个值（例如 externalUrl：1 或 0），然后检查 projectDetail.externalUrl 是否为 1（它包含一个外部 link）。然后，也许对外部域尝试以下操作：

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

你的情况：

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

有关详细信息，请参阅此答案：

编辑 1

如果 Link 不适用于外部网站，这可能与您使用的 react-router 版本有关。实际上，要导航到外部网站，您也可以使用锚标记 <a> 进行重定向。检查你的项目有什么 URL 然后有条件地渲染 <Link> 或 <a>.

<a href="www.example.com" target=_blank></a>

在循环数据时尝试在本地和 public 网页之间切换

Trying to switch between local and public webpage while looping through data

html

jsx

reactjs