使用錨定標記鏈接到使用反應路由器hashlocation的相同頁面

Question

嘗試鏈接到具有錨定標記的同一頁面，但正如我使用的反應路由器HashLocation如下，路由器捕獲它阻止錨點正常工作，除了生產「無路線匹配路徑」的錯誤。

Router.run(routes, Router.HashLocation, (Root) => { React.render(<Root/>, document.body); }); 

同樣的問題已被要求在下面的鏈接，使用「HistoryLocation」的一些暗示，但我要堅持用「HashLocation」和那些鏈接不提供具體的答案，因而需要幫助：

1）How to use normal anchor links with react-router 2）Using React-Router to link within a page

我不知道是否有某種過濾器在路由器排除一些散列，以便我可以使用默認的相同頁面錨鏈接。

Answer 1

使用HashLocation路由器的整點是使用#來處理路由，這是一個黑客位的允許客戶端導航，但實際上它是一個單頁的應用。

您的網址中不能有多個#，瀏覽器無法使用多個網址。考慮到這一點，我認爲你應該自己處理「in page」導航（但實際上你的整個站點是「在頁面導航中」），也許只需使用一些jQuery（或純javascript）代碼滾動到指定的DOM id也許在react-router轉換後的某個鉤子上。

Answer 2

嘗試類似這樣的事情。

componentDidUpdate() { if ((this.props.index == this.props.selected)) React.findDOMNode(this).scrollIntoView(); }