Сегодня мы изучим основы next/router
и поймем проблемы, с которыми обычно сталкивается большинство разработчиков при начале работы.
Маршрутизатор Next.js – это неотъемлемая часть платформы Next.js, которая позволяет разработчикам легко создавать серверные приложения React с автоматическим разделением кода и оптимизированной производительностью. С Next.js Router вы можете настроить маршруты для обработки различных URL-адресов, навигации между страницами и обработки динамических параметров в вашем приложении. Это мощный инструмент, который можно использовать для создания широкого спектра приложений, от простых блогов до сложных веб-приложений.
useRouter
Хук useRouter
— это функция, предоставляемая Next.js, которая позволяет вам получить доступ к объекту маршрутизатора внутри ваших функциональных компонентов React. Его можно использовать для получения текущего маршрута, навигации между маршрутами и выполнения других операций, связанных с маршрутизацией.
Чтобы использовать хук useRouter
, вам нужно импортировать его из модуля next/router
, а затем вызвать внутри вашего функционального компонента. Вот пример того, как вы можете использовать его для получения текущего маршрута:
import { useRouter } from 'next/router'; function MyComponent() { const router = useRouter(); const { pathname } = router; return <p>The current path is: {pathname}</p>; }
В этом примере мы используем присваивание деструктурирования, чтобы извлечь свойство pathname
из объекта router
, а затем отобразить его как элемент абзаца.
router.push
router.push
— это метод, предоставляемый Next.js Router, который позволяет вам перейти к другому маршруту в вашем приложении. Его можно использовать для программного перехода к новому маршруту либо из функции внутри компонента, либо из обработчика событий.
Чтобы использовать router.push
, вам нужно импортировать хук useRouter
из модуля next/router
, а затем вызвать его внутри вашего компонента. Вот пример того, как вы можете использовать router.push
для перехода к новому маршруту при нажатии кнопки:
import { useRouter } from 'next/router'; function MyComponent() { const router = useRouter(); const handleClick = () => { router.push('/some/other/route'); }; return <button onClick={handleClick}>Go to another route</button>; }
В этом примере мы используем метод router.push
для перехода к новому маршруту при нажатии кнопки. Метод router.push
принимает один аргумент — путь к маршруту, к которому вы хотите перейти.
router.push
способ передачи параметров запроса:
Вы также можете использовать метод router.push
для передачи параметров запроса в новый маршрут. Для этого вы можете передать объект в качестве второго аргумента router.push
, например:
router.push('/some/route', { query: { param: 'value' } });
Проблема в рендеринге на стороне клиента:
Это самая важная проблема, которая до сих пор не решена командой Next.js.
В приложении Next.js вы можете выбрать, использовать ли SSR (рендеринг на стороне сервера) или CSR (рендеринг на стороне клиента) для каждой страницы. Если вы используете SSR, страница будет отображаться на сервере, а объект
query
будет заполнен проанализированными параметрами запроса. Если вы используете CSR, страница будет отображаться на клиенте, а объектquery
будет пустым во время предварительной обработки.
Объект query
передается компоненту страницы в качестве реквизита и доступен через хук useRouter
. Если во время пререндеринга объект query
является пустым, это означает, что страница рендерится на клиенте, а параметры запроса недоступны на сервере.
Например, если вы перейдете к маршруту /destination
с параметром запроса myData
, для которого установлено значение some data
, результирующий URL-адрес будет выглядеть примерно так: /destination?myData=some%20data
. Если страница /destination
использует SSR, объект query
будет содержать проанализированные параметры запроса, и вы сможете получить доступ к параметру myData
на маршруте назначения. Если страница /destination
использует CSR, объект query
будет пустым во время предварительной визуализации, и вы не сможете получить доступ к параметру myData
на сервере. Вы сможете получить доступ к параметру myData
на клиенте только после того, как страница завершит рендеринг.
Команда Next.js упускает из виду серьезную проблему.
Давайте посмотрим, как мы можем решить эту проблему, используя некоторые хаки.
Как решить проблему с пустым объектом CSR?
Использование JSON.stringify
для сериализации данных, передаваемых через свойство state
, может быть решением проблемы query
, когда объект является пустым объектом во время предварительного рендеринга в приложении Next.js, отображаемом на стороне клиента (CSR).
Вот пример того, как вы можете использовать JSON.stringify
для передачи сериализуемых данных через свойство state
:
import { useRouter } from 'next/router'; function MyComponent() { const router = useRouter(); const handleClick = () => { router.push({ pathname: '/destination', query: { myData: JSON.stringify({'some data'}) } }); }; return ( <div> <button onClick={handleClick}>Go to destination</button> </div> ); }
На маршруте /destination
вы можете использовать JSON.parse
для десериализации данных, переданных через свойство state
:
import { useRouter } from 'next/router'; function Destination() { const router = useRouter(); const { myData } = router.query; const [data, setData] = React.useState({}) useEffect(() => { if (myData) setData(JSON.parse(myData)); }, [router.query]); return ( <div> <p>Received data: {data}</p> </div> ); }
Таким образом, мы передаем объекты последующим компонентам. И этот хак очень удобен, когда вы имеете дело с проблемой пустого объекта CSR.
Теперь, когда вы отправили данные через маршрутизатор. Но если вы не хотите показывать данные в строке URL или не хотите предоставлять данные. Возможно, иногда вы хотите, чтобы ваша строка URL была чистой. Есть хак для достижения того же самого.
Пример отправки чистой строки URL/предотвращения раскрытия данных:
router.push({ pathname: '/destination', query: { myData: JSON.stringify({'some data'}) } }, '/destination');
Приведенный выше пример помогает нам отправлять данные через параметры запроса, но с чистым URL-адресом.
В этом уроке мы узнали о:
- Как начать работу с
next/router
? - Такие функции, как
router.push()
. - Как отправлять объекты/данные через
params
. - Проблемы, связанные с рендерингом на стороне клиента и их решение.
- Как отправить данные через
params
, используя чистый URL?
Удачного кодирования!
Повышение уровня кодирования
Спасибо, что являетесь частью нашего сообщества! Перед тем, как ты уйдешь:
- 👏 Хлопайте за историю и подписывайтесь на автора 👉
- 📰 Смотрите больше контента в публикации Level Up Coding
- 🔔 Подписывайтесь на нас: Twitter | ЛинкедИн | "Новостная рассылка"
🚀👉 Присоединяйтесь к коллективу талантов Level Up и найдите прекрасную работу