在 react 或 vanilla js 中链接时如何从 URL 中删除 #答案

【问题标题】：How to delete the # from the URL when linking in react or vanilla js在 react 或 vanilla js 中链接时如何从 URL 中删除 #
【发布时间】：2021-06-18 08:18:45
【问题描述】：

I'm developing a website where I have a navbar at the top, and when an option is selected, the screen goes to the part of the page that is linked with the ID.我的问题是，一旦我按下该选项，URL 就会显示 # + 所选选项。如何删除 # 并只留下单词，或者是否可以选择删除两者。我没有使用 React-ROUTER-DOM

发生了什么：www.mywebsite.com/#aboutus

我想发生什么：www.mywebsite.com/aboutus 或只是www.mywebsite.com

导航栏

<div className="main-navbar">
    <a href="#home">home</a>
    <a href="#aboutus">about</a>
    <a href="#contact">contact</a>
</div>

示例

<div id="aboutus">
  //CONTENT
< /div>

【问题讨论】：

你能去掉锚标签上的“#”号吗？
删除# 将产生服务器端后果。如果您使用修改后的 url 重新加载页面，则服务器不知道该路径。服务器看不到哈希部分 (#xxxx)
如果我这样做，它不会进入我想要的页面部分，它只会刷新网站

标签： javascript reactjs linker href

【解决方案1】：

首先 # 不能被删除，因为 # 指定了你想要关注的元素，除了 # 你可以使用 Element.scrollIntoView() 并制作一个单击事件，该事件将滚动到没有#

的元素

document.getElementById("yourid").scrollIntoView();

查看此page 了解更多信息

【讨论】：