如何使用 Nextjs 将我的 URL 与应用程序状态同步

【问题标题】：How do i sync my URL with application state using Nextjs如何使用 Nextjs 将我的 URL 与应用程序状态同步
【发布时间】：2020-05-22 16:27:51
【问题描述】：

我的应用程序有过滤器。我想做浅层路由，并在用户更改过滤器时将查询添加到 URL，同时更新我的应用程序状态。但这似乎我在维持两种状态。有没有这方面的最佳实践？因为我希望我的 url 匹配应用程序状态

【问题讨论】：

标签： reactjs redux react-router next.js use-reducer

【解决方案1】：

从 url 导出您的应用状态。这意味着您需要更改 url，应用程序将重新渲染 -> 从 url 派生新状态。

// somePage.jsx

import { useRouter } from 'next/router';
import { useState, useEffect } from 'react';

const somePage = () => {
  const router = useRouter();
  const [myState, setMyState] = useState({ page: 1 });
  useEffect(() => {
    setState({ page: query.page });
  }, [router.query.page]);

  return (
    <div>
      {JSON.stringify(myState)}
      {[1, 2, 3, 4, 5].map(page => (
        <Link href={`?page=${page}`} key={page}>
          <a>page {page}</a>
        </Link>
      ))}
    </div>
  );
};

export default somePage;

【讨论】：