Блог

У меня есть динамический маршрут в pages/user/[id].jsx моем [id].jsx содержимом console.log(useRouter().query.id); , если я перейду к url/user/5 нему, когда проверю консоль, как только получу undefined, а затем правильный идентификатор (в данном случае 5). Что здесь происходит, есть ли способ это исправить?

Для этого вы можете использовать getInitialProps.

 // sample usage
// file /pages/user/[id].jsx

export default function User({id}){ 
  return <div>{id}</div>
}
    
User.getInitialProps = (appContext) => {
  return {id: appContext.query.id}
}
 

Я не знаю содержимого вашей страницы, но если у вас нет getStaticProps or getServerSideProps (или old getInitialProps ), то NextJS обрабатывает вашу страницу как статическую страницу и выполняет автоматическую статическую оптимизацию (https://nextjs.org/docs/advanced-features/automatic-static-optimization#how-it-works )

Там вы можете прочитать, что:

Во время предварительной визуализации объект запроса маршрутизатора будет пустым, поскольку у нас нет информации о запросе для предоставления на этом этапе. После гидратации, Next.js вызовет обновление вашего приложения для предоставления параметров маршрута в объекте запроса.

Чтобы преодолеть двойной рендеринг, вы можете сделать:

 // pages/user/[id].jsx

import { useRouter } from 'next/router';

const UserPage = () => {
    const { query, isReady } = useRouter()

    // wait until there is a query with the data; or `!query.id`
    if (!isReady) {
        return null;
    }

    return query.id;
}

export default UserPage;
 

Или, если у вас есть какой-то эффект использования:

 // pages/user/[id].jsx

import { useEffect } from 'react';
import { useRouter } from 'next/router';

const UserPage = () => {
    const { query, isReady } = useRouter()
    
    useEffect(() => {
        if (isReady) {
            // fetch(`your.domain/user/${query.id}`)...;
        }
    }, [isReady])

    if (!isReady) {
        return null;
    }

    return query.id;
}

export default UserPage;