Reactjs 反应路由器<；链接>；转到动态页面并返回到useEffect中的上一个状态

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

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>
    );
}

const-App=（）=>{
返回(
路由路径='/item/：id'组件={item}/>
路由路径='/'精确组件={Search}/>
)
}
常量项目=（道具）=>{
返回(
{props.data.map（image=>(
/*链接到组件项*/
))}
);
}
常量搜索=（）=>{
useffect（（）=>{
getData（）；
}，[计数]；
const nextPage=（事件）=>{
设置计数（计数+1）；
getData（）；
event.preventDefault（）；
}
const prevPage=事件=>{
如果（计数>1）{
设置计数（计数-1）；
getData（）；
}
event.preventDefault（）；
}
返回(
上
下一个
);
}

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

表单状态正在被清除，因为您将其保持在“本地”组件状态—每次切换页面时都会重新呈现该组件。解决这个问题的“简单”方法是在

App

中管理

Search

组件的状态，并将所有处理程序添加到

App

中，这也称为“提升”状态。虽然这是一种“简单”的方法，但它也很快而且肮脏（你将来可能需要重构），因为如果你添加其他页面/表单状态等，它最终会使你的

应用程序

组件过于复杂

另一种方法（也很简单快捷，我推荐）是将搜索值存储在

localStorage

中。您可以将它们保存为JSON格式，以便在组件装载后读取并用于更新表单。我认为如果这是一个小应用程序，这可能是最好的方式

---

大型应用程序（3+页）的方法是使用全局状态管理系统、Flux、Redux、Mobx等。这些系统使维护全局应用程序状态和持久化信息变得更加容易，即使您在应用程序的不同页面中导航（只要您维护会话）。虽然我建议您仔细研究实践，但这种方法通常只适用于较大的应用程序，可能会为较小的应用程序增加太多的开销。

另一种“快赢”方法是利用ReactRouter的

状态。基本上，您可以将状态属性设置为路由器历史中的特定点。我以前用它来记住延迟加载网格的滚动位置

这样做的目的是将您的状态应用于当前浏览器历史位置，因此当您在其他位置导航，然后在浏览器导航栏上回击时，以前的状态也会恢复（不仅仅是URL）

本质上，创建您自己的
链接
组件包装器：

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);

从“React”导入React；
从“react router”导入{withRouter}；
从'react router dom'导入{Link}；
类CustomLink扩展了React.Component{
handleClick（e）{
const{count，input，history}=this.props；
状态={count，input}
历史。替换（{state}）；
}
render（）{
const{to，children}=this.props；
返回(
{儿童}
);
}
}
使用路由器导出默认值（CustomLink）；