使用反应路由器在页面部分内导航 [英] Navigation within section of a page using react router

问题描述

我的导航栏包含以下内容

+------+-------+-------+|首页 |关于 |登录 |+------+-------+-------+

Home 是具有多个部分的垂直滚动页面(例如 #About 和其他部分)而登录是单独的反应组件，它在 /login 上呈现 路线.

这是我的 route.js 文件

<IndexRoute 组件={Home}/><Route path="/login" component={Login}/></路线>

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

目前我是这样做的:

<Link to="/#about-us">关于</Link>

主页页面中的

和关于部分是

关于我们

这种方法的问题是当我在登录页面 (/login) 并单击主页的关于部分链接 (/#about-us) 时什么也没有发生！

我正在使用 react-routerV2

解决方案

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

animatedScroll: function(div_to_scroll_to) {jQuery('html, body').animate({滚动顶部:div_to_scroll_to.offset().top}, 500);}

点击 About 链接应该触发一个 onClick 事件，它调用 animatedScroll 和你想要滚动到的 div(这是上面代码中的一个 jQuery 元素)作为参数.

这避免了页面重新加载(这是 <a href="..." ... 修复程序的工作方式)并且您只需做很少的工作.

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

祝你好运！

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

I have my navigation bar with following contents

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

Home is vertically scroll-able page with multiple sections (e.g #About and other sections) While login is separate react component which gets rendered on /login route.

Here is my route.js file

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

My question is how should I handle navigational changes within page sections?

Currently I am doing it like this:

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

and About section within home page is

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

Problem with this approach is when I am at login page(/login) and click on About section link (/#about-us) of Home page nothing happens!

Edit: I am using react-routerV2

解决方案

I've run into the same problem! The fix I'm using is below...

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

Clicking the About link should trigger an onClick event which calls animatedScroll with the div you want to scroll to (which is a jQuery element in the above code) as the parameter.

This avoids page reloads (which is how the <a href="..." ... fix would work) and requires very little work on your part.

Hopefully the React-Router team will have built handlers for intra-component navigation soon.

Good luck!

Note: Depending on how your page is structured jQuery('html, body') may not be appropriate. This should always just be the parent container. Please let me know if you have any further questions.

这篇关于使用反应路由器在页面部分内导航的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！