Reactjs 什么'；“这是放置的正确位置”；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'),
)

ReactDOM.render(
//试过放在下面，没用
,
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>
    </>
  )
}

函数应用程序（）{
返回(
//试过放在上面，没用
{/*  */}
)
}

---

我还注意到，

正在分解对象的属性

历史

，但我没有在

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，您需要在其中执行此操作。

我想补充一点，我还从css属性中删除了平滑滚动以使其正常工作