React路由器：渲染页面自动滚动到底部答案

【问题标题】：React router : rendered page scrolls automatically to the bottomReact路由器：渲染页面自动滚动到底部
【发布时间】：2022-01-10 08:45:14
【问题描述】：

我注意到，当我访问一条路线时，当我使用<Link> 时，页面会自动滚动到底部，我有点困惑，因为它正在工作并且我得到了页面，但它一直自动滚动到因这种行为而垫底。

这是路由器：

import {Link,Routes,Route,Navigate} from 'react-router'

const App = () => {
  const user=true
  return <div>
    <Routes>
      <Route exact path='/' element={<Home/>} />
      <Route exact path="/products/:category" element={ <ShoppingCat/>}/>
      <Route exact path="/product/:id" element={ <ProductView/>}/>
      <Route exact path="/cart" element={ <Cart/>}/>
       <Route exact path="/login" element={user?<Navigate to='/'/>: <Login/>}/>
       <Route exact path="/register" element={ user? <Navigate to='/'/> :<Register/>}/>
    </Routes>

这是一个访问<ProductView/> 路由的按钮：

<Link to={`/product/${product._id}`}>
  <button className='btn-4'>View </button>
</Link>

【问题讨论】：

我在这里没有看到任何异常。认为您可以为您的代码创建一个运行代码和框演示，以重现我们可以实时检查和调试的问题？

标签： javascript reactjs react-router

【解决方案1】：

没有看到更多代码，我的猜测是您的按钮位置实际上位于页面底部，因此当您更改路线时，您将停留在底部，因为您没有滚动到顶部组件。

要在每次路线更改时滚动到顶部，请执行以下操作。

新组件 ScrollToTop.js

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);

然后把你的 app.js 改成这个

import {Link,Routes,Route,Navigate} from 'react-router'

const App = () => {
  const user=true
  return <div>
    <ScrollToTop />
    <Routes>
      <Route exact path='/' element={<Home/>} />
      <Route exact path="/products/:category" element={ <ShoppingCat/>}/>
      <Route exact path="/product/:id" element={ <ProductView/>}/>
      <Route exact path="/cart" element={ <Cart/>}/>
       <Route exact path="/login" element={user?<Navigate to='/'/>: <Login/>}/>
       <Route exact path="/register" element={ user? <Navigate to='/'/> :<Register/>}/>
    </Routes>
</div>

【讨论】：

你说的很对，我刚刚修好了，谢谢你花时间帮忙！

【解决方案2】：

虽然上面的答案适用于旧版本，但 withRouter 和 history 在 V6 中不再存在，所以这是滚动到顶部包装器在更高版本中的外观：

import { useEffect } from "react";
import { useLocation } from "react-router-dom";

export default function ScrollToTop() {
  const { pathname } = useLocation();

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);

  return null;
}

在 index.js 中：

import ScrollToTop from "./ScrollToTop";


ReactDOM.render(
 
    <Router>
      <ScrollToTop />
      <App />
    </Router>,

  document.getElementById("root")
);

【讨论】：