使用反应路由器在页面部分内导航答案

【问题标题】：Navigation within section of a page using react router使用反应路由器在页面部分内导航
【发布时间】：2016-03-11 17:50:45
【问题描述】：

我的导航栏包含以下内容

+------+-------+-------+
| 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) 时没有任何反应！

编辑： 我正在使用 react-routerV2

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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') 可能不合适。这应该始终只是父容器。如果您有任何其他问题，请告诉我。

【讨论】：