Question

我有适用于我的应用程序的过滤器。我想进行浅层路由，并在用户更改过滤器的同时将查询添加到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;

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

1 个答案: