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

Question

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

标签： htmlreactjssafarireact-routeranchor

Answer 1

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