react-router-dom V6版本页面跳转滚动条到顶部

最新推荐文章于 2024-03-22 16:09:09 发布

想念如果有声音___

最新推荐文章于 2024-03-22 16:09:09 发布

阅读量989

点赞数 4

分类专栏： react 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/qq_19249021/article/details/126409761

版权

react 专栏收录该内容

21 篇文章 6 订阅

订阅专栏

最近在玩’React’，发现react-router-dom 跳转后页面还是在之前的位置，网上搜了一部分资料发，先大多数都是V5的解决方案，记录一下自己V6的解决方案

1. 代码

项目任意处新建AutoTop.js文件

	import { useLayoutEffect } from "react";
	import { useLocation } from "react-router-dom";
	
	const AutoScorllTop = ({ children }) => {
	  const location = useLocation();
	  useLayoutEffect(() => {
	    document.documentElement.scrollTo(0, 0);
	  }, [location.pathname]);
	  return children;
	};
	
	export default AutoScorllTop;

2. 使用

我是直接在app.js页面里使用的

	import { BrowserRouter } from "react-router-dom";
	import AutoScorllTop from '你的路径/AutoTop.js'
	const root = ReactDOM.createRoot(
	  document.getElementById("root") as HTMLElement
	);
	root.render(
	  <BrowserRouter>
	    <AutoScorllTop>
	      <App />
	    </AutoScorllTop>
	  </BrowserRouter>
	)