Как мне получить доступ к текущему маршруту на пользовательской странице 404 Next.JS?

У меня есть настраиваемая страница 404 в моем приложении Next.JS (404.js). На странице я хотел бы отобразить сообщение типа The route <strong>/not-a-route</strong> does not exist, однако при использовании useRouter() и router.pathname Next.js маршрутизатор думает, что я нахожусь на /404, и вместо этого отображает The route <strong>/404</strong> does not exist. Как мне получить доступ к фактическому маршруту на пользовательской странице 404?

export const NotFound: React.FC = () => {
  const router = useRouter();
  console.info(router.pathname) // prints /404
  return (
    <Layout title='Oops! Something went wrong!'>
      <div className = {styles.container}>
        <h1>Oops! Something went wrong!</h1>
          <p>
            The route <strong>{router.pathname}</strong> does not exist.
          </p>
      </div>
    </Layout>
  );
};

Ну вы вообще-то на /404. Вы можете показать нам, где вы делаете редирект? Вы можете передать имя маршрута как props в 404 page

Sinan Yaman 05.04.2021 15:00

@SinanYaman, если пользователь случайно переходит к /abouts вместо /about, текст на странице в настоящее время отображает /404, хотя URL-адрес браузера по-прежнему /abouts - это сценарий, который я сейчас пытаюсь учесть; это не вызвано хитрым перенаправлением.

James Whiteley 05.04.2021 15:06
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
2
24
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете получить доступ к redirected route как router.asPath. Пытаться:

import {useRouter} from 'next/router'
export const NotFound: React.FC = () => {
  const router = useRouter();
  console.info(router.asPath)
  return (
    <Layout title='Oops! Something went wrong!'>
      <div className = {styles.container}>
        <h1>Oops! Something went wrong!</h1>
          <p>
            The route <strong>{router.asPath}</strong> does not exist.
          </p>
      </div>
    </Layout>
  );
};

Другие вопросы по теме