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

【问题标题】：on ReactJS, can't handle a navigation to a div in page from the navigation bar在 ReactJS 上，无法处理从导航栏到页面中 div 的导航
【发布时间】：2019-12-24 07:01:39
【问题描述】：

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

我正在按如下方式使用 Navlink 组件，但无法找到解决方案。

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

工具栏.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”标签。

但它似乎不起作用。

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

非常感谢:)

【问题讨论】：

请分享你的路由组件
@VahidAkhtar 你好，我已将它作为公共目录git 上传到 Github。主要的路由组件在 App.js 文件 中。我应该在我的 Home.js 组件中添加一个类似的组件来管理其中的导航吗？谢谢！

标签： html reactjs navigation

【解决方案1】：

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

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

to="#our-agency"

【讨论】：

非常感谢，不过我也试过了。似乎不起作用...在 NotreAgence.js 中：<section id="#our-agency"> <div className={classes.image__agency}></div> <div className={classes.our__agency}></div> </section>
id=our-agency 不是#our-agency，抱歉修改没有生效

【解决方案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 属性匹配。（这里应该是“section1”。

Home.js

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

}

这可以解决问题。

【讨论】：