将路由器反应<Link>到动态页面并返回到使用中的先前状态效果

Question

我正在尝试制作一个React应用程序，该应用程序具有动态页面和带有下一个和上一个按钮的导航提取功能，当单击Item时，它会显示页面动态页面，但当我按下浏览器上的后退按钮时，它忘记了计数和输入值的状态，并显示初始状态。我应该写些什么来保存状态，以便在返回时保持相同的计数和值，而不是从初始状态开始？

const App = () => {
return (
<Router>
Route path='/item/:id' component={Item} />
Route path='/' exact component={Search} />
</Router>
)
}
const Items = (props) => {
return (
<div>
{props.data.map(image => (
/* Link to component Item */ 
<Link to={`/item/${image.id}`} key={image.id}>
<img src={image.urls.small} alt={image.description} />
</Link>
))}
</div>
);
}
const Search = () => {
useEffect(() => {
getData();
},[count]);
const nextPage = (event) => {
setCount(count + 1);
getData();
event.preventDefault();
}
const prevPage = event => {
if (count > 1) {
setCount(count - 1);
getData();
}
event.preventDefault();
}
return (
<div>
<Items data={images} />
<button onClick={prevPage}>PREV</button>
<button onClick={nextPage}>NEXT</button>
</div>
);
}

Answer 1

看起来您可能需要研究状态管理系统/模式。您正在寻找的是所谓的持久性，在这里您可以重新访问页面并在同一会话中维护相同的值。

您的表单状态正在被清除，因为您将其保持在"本地"组件状态，即每次切换页面时都会重新呈现的组件。解决这个问题的"简单"方法是在App内部管理Search组件的状态，并将所有处理程序添加到App中，这也被称为"提升"状态。虽然这是一种"简单"的方法，但它也很快而且很脏(将来可能需要重构(，因为如果添加其他页面/表单状态等，它最终会使App组件过于复杂。

另一种方法(也是快速而简单的，我建议(是将搜索值存储在localStorage中。您可以将它们保存为JSON格式，以便在组件安装后立即读取并用于更新表单。我认为如果这是一个小应用程序，这可能是最好的方式。

大型应用程序(3个以上页面(的方法是使用全局状态管理系统Flux、Redux、Mobx等。这些系统使您更容易维护全局应用程序状态并保持信息，即使您在应用程序中浏览不同页面(只要您维护会话(。虽然我建议你研究一下这种方法，但它通常只适用于较大的应用程序，并且可能会为较小的应用程序增加太多的开销。

Answer 2

另一种"快速获胜"的方法是使用ReactRouter的state。基本上，您可以将状态属性设置为路由器历史记录中的特定点。我以前用过这个来记住懒惰加载网格的滚动位置。

这样做的目的是将您的状态应用于当前浏览器历史记录位置，因此当您在其他地方导航，然后点击浏览器导航栏时，还会恢复以前的状态(而不仅仅是URL(。

本质上，创建自己的Link组件包装器：

import React from 'react';
import { withRouter } from 'react-router';
import { Link } from 'react-router-dom';
class CustomLink extends React.Component {
handleClick(e) {
const { count, input, history } = this.props;
state = { count, input }
history.replace({ state });
}
render() {
const { to, children } = this.props;
return (
<Link
onClick={this.handleClick}
to={to}
>
{children}
</Link>
);
}
}
export default withRouter(CustomLink);