導航反應路由器

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）沒有任何反應！

編輯： 我使用反應，routerV2

Answer 1

陣營路由器目前不處理滾動行爲哈希錨。

但是，如果您使用的是瀏覽器歷史記錄，那麼您可以使用<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')可能不合適。這應該始終只是父容器。如果您還有其他問題，請告訴我。