在ReactJS上，无法处理从导航栏导航到页面中的div

Question

我在一个项目中遇到了麻烦，当我单击导航项时，我需要导航到页面的特定部分。

我正在按以下方式使用Navlink组件，无法把手放在解决方案上。

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

Toolbar.js

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

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

Home.js

return (
      <Layout>
        <Toolbar drawerClickHandler={this.drawerToggleClickHandler} />
        <SideDrawer show={this.state.sideDrawerOpen} />
        {backDrop}
        <Conseil />
        <div className={classes.white}></div>
        <Sigles />
        <NotreAgence />
        <Prestations />
        <ScrollableMenu />
        <Form />
        <Footer />
      </Layout>
    );
  }

[我想做的是，当我单击上面显示的“ accueil” NavLink时，导航到“ 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标签赋予“＃our-agency”标签。

但是它似乎不起作用。

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

非常感谢：）

Answer 1

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

当您有/链接时-会强制更新页面。因此，如果您想访问当前页面上的部分，则只需使用

to =“＃our-agency”