使用 react 路由器在页面部分内导航

Navigation within section of a page using react router

本文关键字：导航 面部 react 路由器 使用      更新时间：2023-09-26

>我的导航栏包含以下内容

+------+-------+-------+
| Home | About | Login |
+------+-------+-------+

主页是具有多个部分（例如#About和其他部分）的可垂直滚动页面，而登录是单独的反应组件，它会/login路由上呈现。

这是我route.js文件

<Route path="/" component={App}>
    <IndexRoute component={Home}/>
    <Route path="/login" component={Login}/>
</Route>

我的问题是我应该如何处理页面部分中的导航更改？

目前我是这样做的：

<li>
    <Link to="/#about-us">About</Link>
</li>

和主页中的"关于"部分是

<div id="about-us">
    About us
</div>

这种方法的问题是当我在登录页面（/login）并单击主页的关于部分链接（/#about-us）时，没有任何反应！

编辑：我正在使用反应路由器V2

React Router 目前不处理哈希锚点的滚动行为。

但是，如果您使用的是浏览器历史记录，则在您的情况下，您可以只使用 <a href="#about-us"> ，并让浏览器处理它。

我遇到了同样的问题！我正在使用的修复程序如下...

animatedScroll: function(div_to_scroll_to) {
  jQuery('html, body').animate({
    scrollTop: div_to_scroll_to.offset().top
  }, 500);
}

单击"关于"链接应触发一个onClick事件，该事件使用要滚动到的div（上面代码中的 jQuery 元素）作为参数调用animatedScroll。

这样可以避免页面重新加载（这就是<a href="..." ...修复的工作方式），并且需要您很少的工作。

希望 React-Router 团队能够很快为组件内导航构建处理程序。

祝你好运！

注意：根据网页的结构jQuery('html, body')可能不合适。这应该始终只是父容器。如果您有任何其他问题，请告诉我。

相关文章：