反应：网站中的锚标记未在 Safari 中呈现。适用于其他浏览器（Chrome、Edge）答案

【问题标题】：React: Anchor tags in website not rendering in safari. Works on other browsers (Chrome,Edge)反应：网站中的锚标记未在 Safari 中呈现。适用于其他浏览器（Chrome、Edge）
【发布时间】：2021-04-08 16:44:53
【问题描述】：

 <Row style={{padding:"2% 15%",alignItems:"center",textAlign:"center"}}>
                    <Col xs="12" lg="4"  className="column-space text-center zoom ">
                        <a href="#link1" style={{padding:"3% 20%"}} className="mont-med text-center column-yellow">
                            link1
                    </a>
                </Col>
                
                <Col xs="12"  lg="4" className="column-space text-center zoom ">
                    <a href="#link2"  style={{padding:"3% 20%"}} className="mont-med text-center column-red">
                        link2
                    </a>
                </Col>
                
                <Col xs="12"  lg="4" className="column-space text-center zoom ">
                    <a href="#link3" style={{padding:"3% 35%"}}  className="mont-med text-center column-green">
                        link3
                    </a>
                </Col>
            </Row>
            <Row style={{padding:"0% 30%",alignItems:"center",textAlign:"center"}}>
                <Col xs="12" lg="6" style={{textAlign:"right"}} className="column-space text-center zoom">
                    <a href="#link4" style={{padding:"3% 20%"}}  className="mont-med text-center column-green">
                        link4
                    </a>

                </Col>
                <Col xs="12" lg="6" className="column-space text-center zoom">
                    <Link to="/link5">
                    <Button className="mont-med text-center column-yellow">
                      link5
                    </Button>
                    </Link>
                </Col>
            </Row>

我已尝试按照其他答案的建议在“http://example.com/product/#link1”之类的标签之前添加 /，但没有奏效。

点击这些链接时页面滚动到顶部而不是所需的 div 元素

【问题讨论】：

标签： html reactjs safari react-router anchor

【解决方案1】：

目前，我发现 HashLink-https://www.npmjs.com/package/react-router-hash-link 在我的用例中工作得很好。我使用哈希链接而不是锚标签，这为我解决了这个问题。如果有人仍然知道这种 safari 行为背后的原因，请 ping。

【讨论】：