reactjs - 如何使用 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: 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;