Html 在ReactJS上，can'；t处理从导航栏到div-in页面的导航

我遇到了一个项目的问题，我需要在单击导航项时导航到页面的某个部分

我正在使用Navlink组件，如下所示，无法着手解决问题

在我的导航组件Toolbar.js中，我有以下关于导航项的代码

Toolbar.js

代理

然后我在Home.js中使用如下组件：

Home.js

返回(
{background}
);
}

当我点击上面显示的“accueil”导航链接时，我试图导航到“NotreAgence”组件

我试着模仿html：

<a href="#scroll">Go to Title</a>
<div>
  <h1 id="scroll">Title</h1>
</div>

标题

详情如下:

            <NavLink
              exact
              activeStyle={{
                fontWeight: 'bold',
                color: 'red',
                textDecoration: 'none'
              }}
              to={{
                pathname: '/',
                hash: '#our-agency'
              }}
            >
              agence
            </NavLink>

代理

并给一个div标签加上“#我们的代理”标签

但它似乎不起作用

我有点卡住了。有什么帮助吗

非常感谢：）

当你有/在链接-它强制更新页面。 所以，若你们想访问当前页面的部分，你们只需要使用

“#我们的代理”

---

快速更新以关闭此问题。一种解决方案是使用

react scroll

库

在导航菜单/栏中： 导入它=>

从“反应滚动”导入{Link}

按如下方式定义导航项（使用问题代码使其更清晰）：

Toolbar.js

import { Link } from 'react-router' 


(...)   


          <li>
            <Link
              exact
              activeStyle={{
                fontWeight: 'bold',
                color: 'red',
                textDecoration: 'none'
              }}
              to="notreAgence"
            >
              agence
            </Link>
          </li>

return (
  <Layout>
    ...
    <NotreAgence id='notreAgence' />
    ...
  </Layout>
);

}

这就成功了

---

有关更多信息：

请与我们分享您的路线component@VahidAkhtar你好，我已经把它作为公共目录上传到Github上了。主要路由组件位于App.js文件中。我是否应该在my Home.js组件中添加一个类似的组件来管理其中的导航？非常感谢。非常感谢，不过我也试过了。似乎不起作用。。。在NotreAgence.js中：

id=我们的机构

不是#我们的机构，很抱歉，编辑未生效

to={{
  pathname: '/',
  hash: '#our-agency'
}}

import { Link } from 'react-router' 


(...)   


          <li>
            <Link
              exact
              activeStyle={{
                fontWeight: 'bold',
                color: 'red',
                textDecoration: 'none'
              }}
              to="notreAgence"
            >
              agence
            </Link>
          </li>

return (
  <Layout>
    ...
    <NotreAgence id='notreAgence' />
    ...
  </Layout>
);