javascript - 使用 ScrollToTop 和 HashRouter 修复 404。有小费吗？

Question

问题： 404页面的内容正在当前页面内容下方的所有页面上呈现。
问题的原因：我创建了一个组件，该组件在路由更改时将页面滚动到顶部。

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

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

  return <>{ children }</>;
}

export default withRouter(ScrollToTop);

import React from 'react';
import { HashRouter, Route, Switch } from 'react-router-dom';

import ScrollToTop from './pages/Common/ScrollToTop';

import Home from './pages/Home';
import NotFound from './pages/NotFound';
import Login from './pages/User/Login';
import Register from './pages/User/Register';

function Routes() {
  return (
    <HashRouter>
      <Switch>
        <ScrollToTop>
          <Route exact path="/" component={Home} />
          <Route exact path="/login" component={Login} />
          <Route exact path="/register" component={Register} />

          <Route component={NotFound} />
        </ScrollToTop>
      </Switch>
    </HashRouter>
  );
}

export default Routes;

组件 ScrollToTop 不知何故与 Switch 组件混淆。我意识到删除 ScrollToTop 组件按预期工作。由于删除 ScrollToTop 是不可能的，有没有人有任何建议或任何解决方法？谢谢！

标签： javascriptreactjsreact-router