使用 React Router 导航到页面的一部分答案

【问题标题】：Navigating to a section of the page using React Router使用 React Router 导航到页面的一部分
【发布时间】：2021-07-01 12:53:22
【问题描述】：

我正在使用 React JS。我的页面分为 3 个组件：

导航
div
部分

文件夹：

（文件夹：Navbar.js、Navbar.scss）
（文件夹：MyDivSection.js、MyDivSection.scss）
（文件夹：MySection.js、MySection.scss）
App.js（上述所有组件都被调用的地方）
index.js (ReactDOM.render(, document.getElementById('root')); )

在 App.js 中

<div className="app">
   <Navbar/>
   <MyDivSection/>
   <MySection/>
</div>

我正在使用 React Router，这是我的代码：

<Router>
            <div className="curtain__div">
                <ul className="menu__items">
                  
                    {/** There is a problem here */}
                    <li><NavLink to="#inquiry-section">Contact</NavLink></li>
                </ul>
            </div>


             <Switch>
                <Route exact path="#inquiry-section" component={ContactFormSection}/>
             </Switch>

        </Router>

这是我的页面布局：

我希望当用户点击链接时，它使用 React Router 滚动到页面底部到该部分？

【问题讨论】：

标签： javascript reactjs react-redux react-router react-hooks

【解决方案1】：

您可以使用普通 html 使用锚标记来做到这一点，使其与页面的一部分对齐

但是你说你想让它滚动...... react-scroll 是一个很棒的库 https://www.npmjs.com/package/react-scroll

【讨论】：