反應路由器4滾動恢復防止錨的天然行爲鏈接

Question

我使用這個解決方案，以恢復對頁面變化滾動：

ReactDOM.render(
    <Router> 
    <ScrollToTop> 
     <div className="App"> 
     <Header /> 
     <Main /> 
     <Footer /> 
     </div> 
    </ScrollToTop> 
    </Router>, 
    document.getElementById('root') 
); 

這是我ScrollToTop組件：

import React, { Component } from 'react'; 
import {withRouter} from 'react-router'; 

class ScrollToTop extends Component { 
    componentDidUpdate(prevProps) { 
    if (this.props.location !== prevProps.location) { 
     window.scrollTo(0, 0); 
    } 
    } 

    render() { 
    return this.props.children; 
    } 
} 

export default withRouter(ScrollToTop) 

該作品很好，除了錨鏈接;實際上，它會覆蓋錨鏈接的行爲，並且我無法滾動到頁面的所需部分。我知道我可以創建一個容器並將其用於我想要使用的頁面;但是，我仍然會遇到同樣的問題，因爲導航到同一頁面可能會觸發不同的行爲（有時將窗口滾動到頂部，有時滾動到錨點鏈接）。有沒有一種方法可以在任何情況下保持理想的行爲？

Answer 1

您可以檢查window.location.hash屬性以查看您是否正在訪問錨鏈接，如果不是，請滾動到頂部。你的代碼看起來是這樣的：

import React, { Component } from 'react'; 
import {withRouter} from 'react-router'; 

class ScrollToTop extends Component { 
    componentDidUpdate(prevProps) { 
    const hasLocationChanged = this.props.location !== prevProps.location; 
    const urlHasHash = window.location.hash !== ''; 

    if (hasLocationChanged && !urlHasHash) { 
     window.scrollTo(0, 0); 
    } 
    } 

    render() { 
    return this.props.children; 
    } 
} 

export default withRouter(ScrollToTop);