React 在 localhost url 而不是 https://websitelink 之后打开网站 link

Question

我从数据库中获取雇主的网址，当我单击网址文本时，它会打开为 localhost:3000/webadresslink，如何将其更改为 https://webaddresslink

import React, { useState, useEffect } from 'react'
import EmployerService from '../../services/employerService'
import { Styles } from './style'
import { Card, Container } from 'react-bootstrap'

const EmployersList = () => {
  const [employers, setEmployers] = useState([])

  useEffect(() => {
    let employerService = new EmployerService()
    employerService.getAllEmployers().then(result => setEmployers(result.data.data))
  })
  return (
    <Styles>
      <Container>
        {
          employers.map(employer => (
            <Card>
              <Card.Body>
                <Card.Title>{employer.companyName}</Card.Title>
                <Card.Text>
                  <a href={employer.webAddress} target="blank">
                    {employer.webAddress}
                  </a>
                </Card.Text>
                <Card.Text>
                  {employer.email}
                </Card.Text>
                <Card.Text>
                  {employer.phoneNumber}
                </Card.Text>
              </Card.Body>
            </Card>
          ))
        }
      </Container>
    </Styles>
  )
}

Answer 1

因为 kodlama.io 不是绝对的 URL。它可能直觉上对你来说看起来像一个，但它结构上与其他相关URL没有任何不同，例如：

index.html
index.com
index.html.com
www.index.html
等等

要告诉浏览器这是 不同主机 的 URL，您需要为其添加前缀：

https://kodlama.io

或者甚至简单地说：

//kodlama.io

如果显示的数据没有很好地组织并且一些 URL 值有前缀而一些没有那么前端逻辑的可行尝试可能很简单：如果该值不包含“//”，则在其前面加上“//”。例如：

href={
  employer.webAddress.includes('//') ?
  employer.webAddress :
  `//${employer.webAddress}`
}

React 在 localhost url 而不是 https://websitelink 之后打开网站 link

React opens website link after localhost url instead of https://websitelink

reactjs

react-link