We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
我是页眉
正则匹配链接[]()语法上有局限性 , 如有疑虑可查看本文原文
[]()
React Router 的 useLocation 钩子是用于获取当前页面的 location 对象的,而在浏览器刷新时,页面会重新加载,React 组件也会重新渲染,这可能导致之前的 location 对象被重置。
useLocation
location
当页面刷新时,useLocation 钩子返回的 location 对象的值可能为 undefined 或包含一些初始值。这是因为在刷新页面时,React Router 需要重新计算 location 对象。
undefined
如果你希望在页面刷新后能够访问之前的 location 对象,你可以考虑使用浏览器的 sessionStorage 或 localStorage 来在页面之间保持状态。你可以在组件挂载时将 location 对象保存到 sessionStorage 中,然后在刷新后再次检查 sessionStorage。
sessionStorage
localStorage
以下是一个简单的示例:
import React, { useEffect } from 'react'; import { useLocation } from 'react-router-dom'; const MyComponent = () => { const location = useLocation(); useEffect(() => { // 在组件挂载时将 location 对象保存到 sessionStorage 中 sessionStorage.setItem('lastLocation', JSON.stringify(location)); }, [location]); // 在刷新后再次检查 sessionStorage const savedLocation = JSON.parse(sessionStorage.getItem('lastLocation')) || {}; return ( <div> <p>Current Location: {location.pathname}</p> <p>Saved Location: {savedLocation.pathname}</p> </div> ); }; export default MyComponent;
请注意,使用 sessionStorage 或 localStorage 时要小心,因为这些存储是全局的,可能会被其他页面或组件影响。确保在适当的时候清理或更新这些存储的内容。
sessionStorage 和 localStorage 都是 Web Storage API 提供的两种客户端存储数据的方式。它们允许你在客户端(浏览器)中存储数据,以便在不同的页面或刷新页面时仍然可以访问。
sessionStorage:
sessionStorage.setItem(key, value)
sessionStorage.getItem(key)
localStorage:
localStorage.setItem(key, value)
localStorage.getItem(key)
示例:
// 使用 sessionStorage 存储数据 sessionStorage.setItem('username', 'john_doe'); const storedUsername = sessionStorage.getItem('username'); console.log(storedUsername); // 输出: john_doe // 使用 localStorage 存储数据 localStorage.setItem('theme', 'dark'); const storedTheme = localStorage.getItem('theme'); console.log(storedTheme); // 输出: dark
这两者的主要区别在于存储数据的生命周期。选择使用哪一个取决于你的需求:如果你只需要在会话期间保留数据,可以使用 sessionStorage;如果你希望数据在多个会话之间保留,甚至在用户关闭浏览器后仍然有效,可以使用 localStorage。
我是页脚
The text was updated successfully, but these errors were encountered:
No branches or pull requests
我是页眉
ReactRouter 在当前页面做刷新动作 useLocation(); 就没有值了
React Router 的
useLocation
钩子是用于获取当前页面的location
对象的,而在浏览器刷新时,页面会重新加载,React 组件也会重新渲染,这可能导致之前的location
对象被重置。当页面刷新时,
useLocation
钩子返回的location
对象的值可能为undefined
或包含一些初始值。这是因为在刷新页面时,React Router 需要重新计算location
对象。如果你希望在页面刷新后能够访问之前的
location
对象,你可以考虑使用浏览器的sessionStorage
或localStorage
来在页面之间保持状态。你可以在组件挂载时将location
对象保存到sessionStorage
中,然后在刷新后再次检查sessionStorage
。以下是一个简单的示例:
请注意,使用
sessionStorage
或localStorage
时要小心,因为这些存储是全局的,可能会被其他页面或组件影响。确保在适当的时候清理或更新这些存储的内容。sessionStorage && localStorage
sessionStorage
和localStorage
都是 Web Storage API 提供的两种客户端存储数据的方式。它们允许你在客户端(浏览器)中存储数据,以便在不同的页面或刷新页面时仍然可以访问。sessionStorage:
sessionStorage
是一个会话级别的存储,数据在当前浏览器标签页或窗口关闭时将被清除。sessionStorage
中的数据只在当前会话期间有效,刷新页面不会影响这个存储。sessionStorage.setItem(key, value)
用于存储数据,sessionStorage.getItem(key)
用于获取数据。localStorage:
localStorage
是一种长期存储,存储的数据将一直存在,除非用户清除浏览器缓存或你通过代码移除。localStorage
中的数据在页面关闭后仍然有效,甚至在浏览器重新启动后仍然存在。localStorage.setItem(key, value)
用于存储数据,localStorage.getItem(key)
用于获取数据。示例:
这两者的主要区别在于存储数据的生命周期。选择使用哪一个取决于你的需求:如果你只需要在会话期间保留数据,可以使用
sessionStorage
;如果你希望数据在多个会话之间保留,甚至在用户关闭浏览器后仍然有效,可以使用localStorage
。我是页脚
The text was updated successfully, but these errors were encountered: