React Router6路由变更页面数据不更新问题

嘻嘻哈哈笑呵呵

于 2022-05-05 17:25:10 发布

阅读量3.8k

点赞数 1

分类专栏： React 前端文章标签： react react-router

本文链接：https://blog.youkuaiyun.com/qq_25856179/article/details/124592964

版权

前端同时被 2 个专栏收录

6 篇文章

订阅专栏

React

1 篇文章

订阅专栏

在React应用中遇到一个问题，使用React Router6进行路由跳转时，尽管URL改变但页面内容未更新。解决方法是通过React Hooks的useEffect监听useLocation的变化，当路径信息变化时，调用loadData函数来刷新页面数据。这种方法确保了URL变化时页面数据的同步更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述

在React路由使用过程中，使用如下结构,其中以id为参数：

<div className="App">
            <BrowserRouter>
                <Routes>
                    <Route path={"xx/:id"}  element={<AA/>} />
                </Routes>
            </BrowserRouter>
        </div>

在使用React Router6的useNavigate方法跳转路由时，页面url已发生变化但是页面信息不更新。

处理方法

针对于React Hook，使用useEffect监控路径获取方法useLocation,当路径信息发生变化后，触发useEffect更新页面数据，示例：

//使用location获取pathname，即包含参数的路径信息
const location = useLocation();
//当location发生变化即调用，loadData用于加载页面数据
useEffect(()=>{

        loadData()
    }, [location])