如何在 React 中从 URL 中删除锚标记答案

【问题标题】：How to remove anchor tag from URL in React如何在 React 中从 URL 中删除锚标记
【发布时间】：2020-05-02 10:31:14
【问题描述】：

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

例如，当我单击“关于”链接时，它会将我的页面滚动到我拥有“关于”组件的位置，但会将 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

【解决方案1】：

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

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

【讨论】：

非常感谢！稍作修改后，我得到了它的工作。我将在下面发布更新的代码作为答案，以便每个人都可以看到。
不错！很高兴看到它有帮助，如果一开始没有用，很抱歉，它的编码来自:-)

【解决方案2】：

更新和工作代码：

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

class Navbar extends React.Component{

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

    onClickExperience(e) {
        e && e.preventDefault(); // to avoid the link from redirecting
        var elementToView = document.getElementById("experience").scrollIntoView();
        }

    onClickEducation(e) {
        e && e.preventDefault(); // to avoid the link from redirecting
        var elementToView = document.getElementById("education").scrollIntoView();
        }

    onClickPortfolio(e) {
        e && e.preventDefault(); // to avoid the link from redirecting
        var elementToView = document.getElementById("portfolio").scrollIntoView();
        }

    render(){
        return(
            <div className="navbar">
                <li> <a onClick={this.onClickAbout.bind(this)}> About </a> </li>
                <li> <a onClick={this.onClickExperience.bind(this)}> Experience </a> </li>
                <li> <a onClick={this.onClickEducation.bind(this)}> Education </a> </li>
                <li> <a onClick={this.onClickPortfolio.bind(this)}> Portfolio </a> </li>
            </div>
        )
    }
}
export default Navbar;

【讨论】：

【解决方案3】：

干法。（基本代码取自其他 2 个解决方案（OP 和 Francesc Montserrat））。这不应该是公认的答案。

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

class Navbar extends React.Component{
    constructor() {
       super();
       this.navigate = this.navigate.bind(this); 
    }
    navigate(e, id) {
       e && e.preventDefault(); // to avoid the link from redirecting
       const elementToView = document.getElementById(id);
       elementToView .scrollIntoView(); 
    }
    render(){
        return(
            <div className="navbar">
                <li> <a href="#" onClick={(e=>this.navigate(e, 'about'))}> About </a> </li>
                <li> <a href="#" onClick={(e=>this.navigate(e, 'experience'))}> Experience </a> </li>
                <li> <a href="#" onClick={(e=>this.navigate(e, 'education'))}> Education </a> </li>
                <li> <a href="#" onClick={(e=>this.navigate(e, 'portfolio'))}> Portfolio </a> </li>
            </div>
        )
    }
}
export default Navbar;

【讨论】：