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

Question

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

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

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

工具栏.js

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

然后我在主页中按如下方式使用该组件.js：

首页.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 机构"标签。

但它似乎不起作用。

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

非常感谢:)

Answer 1

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

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

to="#our-agency">

Answer 2

快速更新以解决此问题。一种解决方案是使用react-scroll库。

在导航菜单/栏中： 导入它=>import { Link } from 'react-scroll'

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

Toolbar.js

import { Link } from 'react-router' 

(...)   

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

为您的组件提供一个 id 属性，其值与Link中的to属性匹配。(这里是"第 1 节"。

Home.js

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

}

这就可以解决问题。

获取更多信息 ： https://scotch.io/tutorials/implementing-smooth-scrolling-in-react