放置“ ScrollToTop”组件的正确位置是什么？

如何解决放置“ ScrollToTop”组件的正确位置是什么？

我正在关注the second answer，以便在每次更改路线时实现从上到下的滚动。答案建议创建一个新组件<ScrollToTop />，我做了

import { useEffect } from 'react';
import { withRouter } from 'react-router-dom';

function ScrollToTop({ history }) {
  useEffect(() => {
    const unlisten = history.listen(() => {
      window.scrollTo(0,0);
    });
    return () => {
      unlisten();
    }
  },[]);

  return (null);
}

export default withRouter(ScrollToTop);

我对放置此类组件的位置感到困惑，因为我的应用程序的结构有些不同。请参见下面的index.js和App.js文件。

index.js

ReactDOM.render(
  <>
    <EWLoader />
    <ContextProvider>
      <Router>                       //tried placing below <Router>,didn't work
        <App />
      </Router>
    </ContextProvider>
  </>,document.getElementById('root'),)

App.js

function App() {
  return (
    <>                                    //tried placing above <Switch>,didn't work
      <Switch>
        <Route path="/EWadmin">
          <Admin />
        </Route>
        <Route path="/ewadmin-allbookings">
          <AdminAllBookings />
        </Route>
        <Route path="/">
          <EWHeader />
          <Middleware />
          {/* <EWPopular /> */}
        </Route>
      </Switch>
    </>
  )
}

我还注意到<ScrollToTop />正在破坏对象的属性history，但是我没有在index.js或App.js的任何位置导入或声明它。也许对此应该做些什么？

解决方法

有两种方法可以滚动到页面顶部更改：

第一个解决方案

将ScrollToTop组件修改为此：

function ScrollToTop({ history }) {
  useEffect(() => {
    const unlisten = history.listen(() => window.scrollTo(0,0));
    return unlisten;
  },[history]); // make sure to list history as a dependency

  return null;
}
export default withRouter(ScrollToTop);

然后在您的路由器下方添加ScrollToTop。现在，只要历史记录更改，任何页面都将滚动到顶部。

第二个解决方案

修改您的ScrollToTop组件：

function ScrollToTop() {
  useEffect(() => {
    window.scrollTo(0,0);
  },[]); // No dependency

  return null;
}
// No need to use withRouter

然后将ScrollToTop添加到您想要此行为的每个Route组件下。