reactjs - 如何从 React 中的 URL 中删除 anchor 标记

Question

所以我有一个用 React 构建的单页应用程序，我想拥有它，所以当我单击导航栏中的链接时，它会滚动到该组件，但不会更改 URL 或将 href anchor 添加到 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;

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