Как мне синхронизировать c мой URL с состоянием приложения, используя Nextjs

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;