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

Question

我有适合我的应用程序的过滤器。我想要进行浅层路由，并在用户更改过滤器时将查询添加到 URL，同时更新我的​​应用程序状态。然而，这似乎是我维持着两种状态。有这方面的最佳实践吗？我希望我的 URL 与应用程序状态相匹配。

Answer 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: router.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;