时间戳

首页 > 解决方案 > 如何在 React 中从 URL 中删除锚标记

reactjs - 如何在 React 中从 URL 中删除锚标记

问题描述

所以我有一个在 React 中构建的单页应用程序，我想要它，所以当我单击导航栏中的链接时，它会滚动到该组件，但不会更改 URL 或将 href 锚添加到 URL。

例如，当我单击“About”链接时，它会将我的页面滚动到我拥有 About 组件的位置，但会将 URL 从“localhost:3000”更改为“localhost:3000/#about”。当我单击导航栏中的任何链接时，它会滚动到显示该组件的位置但将 URL 保留为“localhost:3000”，我该怎么办？

这是我的导航栏代码：

import React from 'react';
import './styles.css';

class Navbar extends React.Component{
    render(){
        return(
            <div className="navbar">
                <li> <a href="#about"> About </a> </li>
                <li> <a href="#experience"> Experience </a> </li>
                <li> <a href="#education"> Education </a> </li>
                <li> <a href="#portfolio"> Portfolio </a> </li>
            </div>
        )
    }
}
export default Navbar;

标签： reactjs

解决方案

您可以使用滚动并禁用链接逻辑：

<a onClick={this.onClickAbout.bind(this)}> About </a>

并添加方法：

private onClickAbout(e) {
e && e.preventDefault(); // to avoid the link from redirecting
const elementToView = document.getElementById("idOfAbout");
elementToView.scrollIntoView(); 
}

并确保About在定义时具有该 id id="idOfAbout"

推荐阅读