![](/img/trans.png)
[英]How to generate separate css files for each page in react-static
[英]React-Static scroll to top on page change
當頁面使用 react-static 更改時,有沒有辦法滾動到頂部? 我正在使用@reach/router
,它默認包含在react-static
中。
我已經嘗試過這個:
<Router onChange={window.scrollTo(0,0)}>
<Routes path="*"/>
</Router>
ans this (from this issue )
<Router history={history} autoScrollToTop={true}>
<Routes path="*"/>
</Router>
但兩者都沒有工作。
react-static 文檔中提到了最后一個解決方案,但似乎已棄用,因為它不再在文檔中。
您需要創建一個新組件Scrolltotop.js
import { useEffect } from 'react'
import { useLocation } from '@reach/router'
export default function Scrolltotop () {
const { pathname } = useLocation()
useEffect(() => {
window.scrollTo(0, 0)
}, [pathname])
return null
}
並將其導入App.js
import Scrolltotop from './components/Scrolltotop'
並將其添加到應用程序 function:
function App () {
return (
<Root>
<Scrolltotop/>
<Router>
<Routes path="*"/>
</Router>
</Root>
)
}
嘗試讓一個組件為您處理滾動並位於您的應用程序組件之上。
用法:
import ManageScroll from './ManageScroll';
ReactDOM.render(<Fragment><ManageScroll/><App/></Fragment>, node);
ManageScroll.js:
import React from "react";
import { Location } from "@reach/router";
let scrollPositions = {};
class ManageScrollImpl extends React.Component {
componentDidMount() {
try {
// session storage will throw for a few reasons
// - user settings
// - in-cognito/private browsing
// - who knows...
let storage = JSON.parse(sessionStorage.getItem("scrollPositions"));
if (storage) {
scrollPositions = JSON.parse(storage) || {};
let { key } = this.props.location;
if (scrollPositions[key]) {
window.scrollTo(0, scrollPositions[key]);
}
}
} catch (e) {}
window.addEventListener("scroll", this.listener);
}
componentWillUnmount() {
window.removeEventListener("scroll", this.listener);
}
componentDidUpdate() {
const { key } = this.props.location;
if (!scrollPositions[key]) {
// never seen this location before
window.scrollTo(0, 0);
} else {
// seen it
window.scrollTo(0, scrollPositions[key]);
}
}
listener = () => {
scrollPositions[this.props.location.key] = window.scrollY;
try {
sessionStorage.setItem(
"scrollPositions",
JSON.stringify(scrollPositions)
);
} catch (e) {}
};
render() {
return null;
}
}
export default () => (
<Location>
{({ location }) => <ManageScrollImpl location={location} />}
</Location>
);
查看這個要點了解更多信息
希望這可以幫助!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.