IT技术 - 使用react-router在页面部分内导航 - 吾爱随笔录

IT技术 javascript reactjs react-router

2021-05-03 17:18:11

我的导航栏包含以下内容

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

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

这是我的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主页的关于部分链接 ( ) 时没有任何react！

编辑： 我正在使用react-routerV2

2个回答

React Router 当前不处理散列锚点的滚动行为。

但是，如果您使用浏览器历史记录，就您而言，您可以只使用<a href="#about-us">，并让浏览器处理它。

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

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

单击 About 链接应触发一个onClick事件，该事件animatedScroll以您要滚动到的 div（这是上述代码中的 jQuery 元素）作为参数调用。

这避免了页面重新加载（这是<a href="..." ...修复程序的工作方式）并且您几乎不需要做任何工作。

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

祝你好运！

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

其它你可能感兴趣的问题