反应路由器<link>到动态页面和 go 回到之前的 state 在 useEffect

Question

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

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

看起来您可能需要查看 state 管理系统/模式。 您正在寻找的东西称为持久性，您可以在其中重新访问页面并在同一 session 中保持相同的值。

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

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

大型应用程序（超过 3 页）的方法是使用全局 state 管理系统、Flux、Redux、Mobx 等。这些系统使维护全局应用程序变得更加容易，即使您在不同的页面中导航并保留信息73A985A6942应用程序（只要您保持会话）。 这种方法，虽然我建议您进行实践，但通常会留给较大的应用程序使用，并且可能会增加太多的开销，使其在较小的应用程序上的价值。

Answer 2

另一种“快速获胜”的方法是利用 ReactRouter 的state 。 基本上，您可以将 state 属性设置为路由器历史记录中的特定点。 我以前用它来记住滚动延迟加载网格的 position。

这样做是将您的 state 应用到当前浏览器历史记录 position，因此当您导航到其他位置然后回击浏览器导航栏时，之前的 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);