本文详解如何通过路由状态（state）+ useLocation 在 React 路由跳转中持久化关键配置（如 shop API 名称），避免因组件卸载导致的 props 丢失问题。
本文详解如何通过路由状态（`state`）+ `uselocation` 在 react 路由跳转中持久化关键配置（如 shop api 名称），避免因组件卸载导致的 props 丢失问题。
在 React 单页应用中，函数组件的 props 本质上是瞬时快照——当用户导航离开页面（如从商品列表页 /shop/shopName_1 跳转至 /metrics/123），原组件（Shop 和 SearchBar）会被完全卸载，其内部状态（包括 selectedAPI）随之销毁。返回时 React 会重新挂载组件并执行初始逻辑（如 useEffect 依赖 shopname 重新计算），但若 URL 参数未携带足够上下文（如仅含 :shopname），就无法自动恢复 selectedAPI 值，导致回退后 apidatabase 变为 null。
根本解法不是“保存 props”，而是将关键上下文随路由一同传递。React Router v6 的 Link 的 state 属性和 useLocation() 是为此设计的官方机制：它允许你在跳转时附带任意序列化数据，并在目标页安全读取。
✅ 正确实践：用路由状态传递 API 上下文
1. 在 SearchBar 中主动传递当前位置信息
修改商品链接，将当前路由位置（含 shopname 和 selectedAPI 等关键信息）作为 state.from 传入：
import { Link, useLocation } from 'react-router-dom';
export default function SearchBar({ apidatabase }) {
const location = useLocation(); // 获取当前路由对象
// ... 其他逻辑保持不变 ...
return (
<div classname="{styles.productWrapper}">
{productData
.filter((item) => !selectedCategory || item.Category === selectedCategory)
.map((item) => (
<link key="{item.id}" classname="{styles.searchBarLink}" to="{`/metrics/${item.id}`}" state="{{" itemdata: item from: location>
<productbox name="{item.Name}" price="{item.Price}"></productbox>
))}
</div>
);
}
? location 对象包含 pathname（如 /shop/shopName_1）、search、hash 等，足以让目标页重建上下文。无需手动提取 shopname 或 selectedAPI。
2. 在 ProductMetrics 中智能回退
利用 useLocation().state 读取来源页信息，并优先返回原始路径：
import { Link, useLocation, useNavigate } from 'react-router-dom';
export default function ProductMetrics() {
const { state } = useLocation();
const navigate = useNavigate();
// 安全获取来源路径（fallback 到首页）
const backPath = state?.from?.pathname ?? '/';
return (
<div align="center">
{/* 渲染商品指标内容 */}
<div>
<link to="{backPath}">← BACK
{/* 或使用编程式导航： */}
{/* <button onclick="{()"> navigate(backPath)}>← BACK</button> */}
</div>
</div>
);
}
3. 优化 Shop 组件：移除冗余状态依赖
既然 selectedAPI 已通过路由状态间接保障一致性，Shop 组件可进一步简化——直接从 URL 解析 API 映射，避免状态管理开销：
function Shop() {
const { shopname } = useParams();
// ✅ 纯函数映射，无副作用，更可靠
const getApiName = (name) => {
const map = {
'shopName_1': 'shopApiName_1',
'shopName_2': 'shopApiName_2',
'shopName_3': 'shopApiName_3'
};
return map[name] || 'null';
};
const selectedAPI = getApiName(shopname);
return (
<div>
<link to="/">BACK
<div classname="{styles.wrapper}">
<div classname="{styles.title}">Search your product at {shopname}</div>
<div classname="{styles.searchBar}">
<searchbar apidatabase="{selectedAPI}"></searchbar>
</div>
</div>
</div>
);
}
⚠️ 注意事项与最佳实践
- 不要滥用 localStorage 或 sessionStorage：虽然能持久化数据，但会引入同步复杂度（如多标签页冲突、过期清理），且违背 React 的声明式数据流原则。
- 避免在 useEffect 中依赖易变的 props：selectedAPI 本就是派生值，应由 shopname 决定，而非独立维护状态。
- state 是序列化的 JSON：确保传递的数据可被 JSON.stringify() 序列化（如不包含函数、Date 对象等）。
- 服务端渲染（SSR）兼容性：useLocation() 在 SSR 中安全可用，state 也会被正确传递。
通过将上下文绑定到路由而非组件状态，你构建了一个健壮、可预测、符合 React Router 设计哲学的数据流——这才是真正“持久化 props”的专业解法。
大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！
