使用反应路由器

Question

我的导航栏包含以下内容

+------+-------+-------+
| 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

Answer 1

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

但是，如果您使用的是浏览器历史记录，则可以使用<a href="#about-us">，然后让浏览器负责处理。

Answer 2

我遇到了同样的问题！我使用的修复程序低于......

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